Method to OR the CSS class ends with selector?

Question

I have the following CSS class selector which will select all <td> children of even <tr> children of <tbody> where <tr> belongs to any class ending in 2:

.table-striped > tbody >  tr:nth-child(2n)[class$='2'] > td{
           background-color: #FFF7C7;
}

What I would like to do is select all <td> children of even <tr> children of <tbody> where <tr> belongs to any class ending in an even number up to but not including 10. I hoped I could do something to the effect of:

.table-striped > tbody >  tr:nth-child(2n)[class$=('2' || '4' || '6' || '8')] > td{
           background-color: #FFF7C7;
}

So my question is, how do I implement an OR case in the class ends with selector?

For reference here is a sample of the HTML (I would like to select all <td> of the first two rows.):

<tbody>
  <tr class="ctgry_2"><td>Data</td><td>Data</td><td>Data</td></tr>
  <tr class="ctgry_6"><td>Data</td><td>Data</td><td>Data</td></tr>
  <tr class="ctgry_3"><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>

That's not possible with CSS, try something like LESS or [SASS](http://http://sass-lang.com). — s1h4d0w, May 25 '16 at 18:31
@s1h4d0w, to say it's not possible with CSS and then suggest using LESS or Sass ignores the fact that LESS and Sass generate CSS, which would mean that it **is** possible. It's just that it's verbose. — zzzzBov, May 25 '16 at 18:33
don't operate with classes through attribute selectors `[class...]` `[class$=2]` is not `has class ended with 2`, it's just `class attribute ended with 2` — vp_arth, May 25 '16 at 18:37
I'm not sure I understand you. The feature he is asking for just can't be used in CSS. With SASS or LESS he could achieve what he wants. — s1h4d0w, May 25 '16 at 18:37
Class names was never designed to be subject of css selectors in any context except `.className`. Why can't to add `even`/`odd`- like classes? — vp_arth, May 25 '16 at 18:45

score 1 · Answer 1 · answered May 25 '16 at 18:35

With CSS you'd need to use , to separate each individual selector:

.table-striped > tbody >  tr:nth-child(2n)[class$='0'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='2'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='4'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='6'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='8'] > td

This is quite verbose, and should be immediately apparent that you're probably making a poor selector choice, where you could just use classes on the appropriate elements.

Method to OR the CSS class ends with selector?

1 Answers1