CSS Alternate Rows - some rows hidden

Question

I\'m trying to style a table so that each row is a different colour (odd/even). I have the following CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f         


        

Answer 1

I realize this is super late, but I ran into this same problem today and came up with a pure CSS solution using an nth-child formula. I don't know if it fits your exact scenario, but if every other row is hidden but you still need the visible rows to be alternating colors, this works great. The CSS selector looks like this:

tr:nth-child(4n - 1) { background-color: grey; }

Here is a fiddle showing it in action.

This makes every other visible row grey. For more information on how these formulas work, this is a great tutorial.