CODEWITHSUNDEEP
htmlcss
metaDesign
metaDesign

Reputation: 628

Target divs with odd/even numbers at the end of their IDs in CSS

I have divs with IDs div1, div2, div3, etc.

I want to target all divs with and ID ending in an odd/even number separately (in CSS).

<div id="div1"></div>
<div id="div2"></div>
<!-- Other html here -->
<div id="div3"></div>
<div id="div4"></div>

The HTML is subject to change regularly, therefore is possible want to avoid having to change the CSS every time.

The divs aren't sequential which is why I haven't used nth-child(even/odd). I want to avoid adding any new attributes to the divs if possible.

Here's a link to a similar question using expressions in the CSS.

I want to achieve something like this in CSS

'#div' + 'even'

Could I use data- attributes? e.g. data-target="1", data-target="2" etc.

Upvotes: 0

Views: 622

Answers (1)

Paulie_D
Paulie_D

Reputation: 115240

This requires multiple selectors.

For instance to select odd numbered IDs, use a regular expressions symbol, $, to refer to the end of a string. 

div[id$="1"],
div[id$="3"],
div[id$="5"],
div[id$="7"],
div[id$="9"] {}


div[id$="1"],
div[id$="3"],
div[id$="5"],
div[id$="7"],
div[id$="9"] {
  color:red;
}
<div id="div1">Odd</div>
<div id="div2">Even</div>
<div id="div3">Odd</div>
<div id="div4">Even</div>
<div id="div99999">Odd</div>
<div id="div2000">Even</div>
<div id="div333">Odd</div>
<div id="div377">Odd</div>

Upvotes: 6

Related Questions