0

I am trying to apply zebra striping in a table with some hidden rows. These hidden rows are marked with either of 2 classes.

#tableId tbody tr:not(.class1):not(.class2):nth-child(odd) {
    background-color: white;
}

This rule gives me striping, but in the table section with hidden rows, it is not striped correctly. It seems that the "not" selection is not working correctly. Any idea why?

I found many ideas to solve it with scripting, but it would be so much cleaner if it was possible with a single css rule.

Mr. Blonde
  • 711
  • 2
  • 12
  • 27
  • Quote: "Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector." - this must also apply in this case. – Mr. Blonde Apr 27 '16 at 11:17
  • I ended up using a jQuery function like this: `$('#tableId tbody tr').removeClass('stripe'); $('#tableId tbody tr:not(.class1):not(.class2):even').addClass('stripe');` You need to add a css definition for the stripe class. – Mr. Blonde Apr 27 '16 at 11:55

0 Answers0