0

I'm looking for a CSS selector that counts every other child of its parent, but excluding certain elements from the counting. I see that the examples I came up with don't select the row marked as .ignore, but they still count them.

Is there a CSS-way to select and count only the .normal elements?

/* trying to exclude .ignore from the set doesn't work */
tr:not(.ignore):nth-child(even) {
  background: red;
}

/* neither does filtering by .normal before applying nth-child */
tr.normal:nth-child(even) {
  background: red;
}
<table>
  <tbody>
    <tr class="normal"><td>text</td></tr>
    <tr class="normal"><td>text to be highlighted</td></tr>
    <tr class="normal"><td>text</td></tr>
    <tr class="ignore"><td>don't count this row</td></tr>
    <tr class="normal"><td>text to be highlighted</td></tr>
    <tr class="normal"><td>text</td></tr>
  </tbody>
</table>
ascripter
  • 5,665
  • 12
  • 45
  • 68
  • Swap your :not, `tr:nth-child(even):not(.ignore)` – Chris W. Oct 31 '19 at 20:52
  • Swapping doesn't work either. I see my question is an exact duplicate. Seems there is no way w/o javascript. – ascripter Oct 31 '19 at 20:56
  • Oh right, didn't see you wanted it to have it basically re-start the even selector after a .ignore though I bet if we saw the real structure it could still be done without js. – Chris W. Oct 31 '19 at 21:15

0 Answers0