[FIXED] How to apply the css on all ID starting with

Issue

On my website I have an AJAX search form. The HTML code displays this ID:

id="edit-field-geolocation-proximity-center-geocoder--Bq5Bx8zXA1A"

I want to apply a style to it. My problem is that the code at the end of Bq5Bx8zXA1A changes with each search.

How to style all ID starting with :

id="edit-field-geolocation-proximity-center-geocoder--"

UPDATE

Here is my current CSS code, it works on non-AJAX forms. But for those who have AJAX enabled, it doesn't work because there is a random code added to the background of the ID :

#edit-field-geolocation-proximity-center-geocoder .form-item {
    margin-top: 0rem;
}

enter image description here

Solution

Welcome to Stack Overflow! I can help with that. One way to achieve what you are looking for in pure CSS is with an attribute prefix selector (which uses a form of regular expressions). In your case the following would likely do the trick:

[id^="edit-field-geolocation-proximity-center-geocoder"] .form-item {
  /* your styles here :) */
}

This thread offers a lot of additional excellent methods on how to use regex in CSS if you would like to do some additional reading.

Answered By - Aaron Meese

Answer Checked By - Mildred Charles (PHPFixing Admin)