Zahymaka Zahymaka - 6 months ago 41
CSS Question

Combining :nth-of-type() and :not

I have a strange case of trying to combine two pseudoclasses:

to get rainbow striping on non-hidden items

Having a
, I assumed css would filter the
items first before applying the
rule, but having them in any order gives me the same result.

Here's a jsfiddle that demonstrates this:

Am I perhaps overlooking something when doing these?


I assumed css wouuld filter the :not items first before applying the :nth-of-type

Nope. CSS is fully declarative; every selector is a simple condition that is true or false independently of any selector part. It's not a procedural language where you take a set and process it, narrowing it down with each step. A selector language with procedural rules would be immune to many kinds of optimisation and would be slower.

So nth-of-type is only about position within an element's parent, and not position in a 'results list so far' because CSS selectors have no such concept. A selector engine could look up the test for nth-of-type before narrowing it with not, as the rules do not interfere with each other.