You can filter nth-child
results using the "of <selector>" syntax:
li:nth-child(2n of :not(.hidden)) {
background-color: grey;
}
li.hidden {
display: none;
}
background-color: grey;
}
li.hidden {
display: none;
}
This will apply alternating background colors for a list where some elements might not be visible (in this example, using the hidden
class). For example, in this list "Two" and "Five" will have a grey background:
<ul>
<li>One</li>
<li>Two</li>
<li class="hidden">Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Final thoughts
For some reason my IDE doesn't recognize this yet, but yes, you can use it.