Question

I have a list of <div>s. Each <div> has class zebra. Until now I’ve used the following to stripe the list:

.zebra:nth-child(2n) { /* colors */ }

Now I’m implementing a filtering feature, such that some of these <div>s will have a class hidden. I tried updating my css to

.zebra:not(.hidden):nth-child(2n) { /* colors */ }

But that had no effect. What am I missing? How can I combine these selectors so that only the showing .zebra <div>s are considered in the :nth-child(2n)?

Here’s a fiddle of what I’m describing.

UPDATE:

• there is an unknown number of .hidden elements, and an unknown total number of elements. (the list is data-driven, not static).

I’d really rather not do any of:

1. run a javascript every time a filter control is touched, just to re-color the showing list items.
2. remove an element entirely when it’s hiding. this makes re-adding it non-trivial (afaict).

Answer 1

Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:

var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);

Then, instead of using :nth-child, use :nth-of-type.

details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }

Unhiding the element can then be done with:

placemarker.parentNode.replaceChild(placemarker.firstChild);

See this static example.