CSS3 odd and even only visible rows
css, css-selectors
Solution
You can't do this with pure CSS because the `:nth-child` selector is calculated with respect to the element and `:not` does not filter element position in the DOM. You need to use JavaScript for a fully flexible solution.
It's still possible for you to do this inflexibly by making elements after `.hide` with `:nth-child` alternate the color they should be:
.hide + p:nth-child(odd) {
background: #0000ff;
}
You can continue to add similar rules for more and more combinations of sibling `.hide` and `p`, but this is very inflexible.
Problem
I'm trying to stripe the colours of alternating elements. But I want the row colors to alternate only the visible rows. If you have a look at the below here is my attempt at trying to get it working. http://jsfiddle.net/kuwFp/3/ ``` <!DOCTYPE html> <html> <head> <style> p:not(.hide):nth-child(odd) { background:#ff0000; } p:not(.hide):nth-child(even) { background:#0000ff; } .hide { display:none; } </style> </head> <body> <p>The first paragraph.</p> <p class="hide">The second paragraph.</p> <p>The third paragraph.</p> </body> </html> ```