How can I select every other element that does not have a specific class?

[sabik123]

I have a list of \[code\]<div>\[/code\]s. Each \[code\]<div>\[/code\] has class \[code\]zebra\[/code\]. Until now I've used the following to stripe the list:\[code\].zebra:nth-child(2n) { /* colors */ }\[/code\]Now I'm implementing a filtering feature, such that some of these \[code\]<div>\[/code\]s will have a class \[code\]hidden\[/code\]. I tried updating my css to\[code\].zebra:not(.hidden):nth-child(2n) { /* colors */ }\[/code\]But that had no effect. What am I missing? How can I combine these selectors so that only the showing \[code\].zebra\[/code\] \[code\]<div>\[/code\]s are considered in the \[code\]:nth-child(2n)\[/code\]?Here's a fiddle of what I'm describing.UPDATE:

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

I'd really rather not do any of:[*]run a javascript every time a filter control is touched, just to re-color the showing list items.[*]remove an element entirely when it's hiding. this makes re-adding it non-trivial (afaict).