0

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

francky
  • 15
  • 4
  • 1
    I would like to add that closing this as a duplicate could be acceptable if a different link were given, but this problem is NOT the same as the one linked. JavaScript is not at all needed, as styles being applied is the sole goal, and CSS regex selectors are a much more appropriate solution here. – Aaron Meese Jul 11 '22 at 00:44
  • 1
    @AaronMeese good point, I've updated the dupes with a CSS only one – Phil Jul 11 '22 at 00:46
  • 1
    Thanks, but I don't understand what I should do. I updated my question with my exact code. – francky Jul 11 '22 at 00:59
  • 1
    You want `[id^="edit-field-geolocation-proximity-center-geocoder"] .form-item { ... }` – Phil Jul 11 '22 at 01:01

1 Answers1

0

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.

Aaron Meese
  • 1,670
  • 3
  • 22
  • 32
  • That's not a _"regex selector"_, nor is there such a thing. That is the [attribute prefix selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#attrvalue_4) – Phil Jul 11 '22 at 00:45
  • @Phil regex is being used as a selector, and searching for such gives the exact same results, so I don't see how it matters in this case. Regardless, thank you for your link :) – Aaron Meese Jul 11 '22 at 00:46
  • 1
    I only point it out because people often want actual regex selectors but they simply don't exist – Phil Jul 11 '22 at 00:47
  • Agreed, good looks. I've ran into that issue before. Thank you! – Aaron Meese Jul 11 '22 at 00:48
  • Thanks, but I don't understand what I should do. I updated my question with my exact code. – francky Jul 11 '22 at 00:59
  • 1
    @francky you would replace your CSS with the stuff I provided (based on whatever type your element is, I am assuming `input`) then add your `margin-top: 0rem;` style where my comment tells you to – Aaron Meese Jul 11 '22 at 01:02
  • thank you, but there is no "input" in the form – francky Jul 11 '22 at 01:13
  • I have no idea how a form doesn't have an input element, but I have updated my answer with the selector suggested by Phil @francky – Aaron Meese Jul 11 '22 at 11:45