Select div with unknown id in name

Question

I have div named #mobile_div_111X222X333-99, 111X222X333 is question id which can change. I have lots of questions but I want to select every div that contains #mobile_div_{any_ID}-99 is it anyway to do that with css only?

Answer 1

Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99

div[id^="mobile_div_"][id$="-99"] {
    // your style
}

We use two CSS3 selectors here:

^= starts with

$= ends with

Refs:

https://www.w3schools.com/cssref/sel_attr_begin.asp

https://www.w3schools.com/cssref/sel_attr_end.asp

Answer 2

You can use prefix attribute selectors with [x^=y], i.e. [id^=mobile_div_].

If that's not specific enough, you can stack a suffix attribute selector on top, using the syntax [x$=y], i.e. [id$=-99], for a complete selector of [id^=mobile_div_][id$=-99]. Note the lack of a space between the brackets.

Answer 3

You can use is like this -

HTML

<div id="abc-123">
  <h1>helo</h1>
</div>
<div id="123-xyz">
  <h1>helo</h1>
</div>
<div id="mobile_div_a-99">
  <h1>helo</h1>
</div>
<div id="mobile_div_b-11">
  <h1>helo</h1>
</div>
<div id="mobile_div_c-99">
  <h1>helo</h1>
</div>

The (^) is used for "starting with" and ($) is used for "ending with".

[id^="abc"]{
  color:blue;
}

[id$="xyz"]{
  color:green;
}

[id^="mobile_div_"][id$='-99']{
background-color:red;  
}

if id='abc-xyz', since CSS is Cascading Style Sheets (ie: top to bottom approach ) , the text color will be green.