1

I have a strange case of trying to combine two pseudoclasses: :not and :nth-of-type() to get rainbow striping on non-hidden items

Having a :not([selector]):nth-of-type([rule]), I assumed css would filter the :not items first before applying the :nth-of-type rule, but having them in any order gives me the same result.

Here's a jsfiddle that demonstrates this: http://jsfiddle.net/j7hjU/

Am I perhaps overlooking something when doing these?

cweston
  • 11,297
  • 19
  • 82
  • 107
Zahymaka
  • 6,523
  • 7
  • 31
  • 37

3 Answers3

6

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
0

This appears to be a duplicate of this question: Css coloring table problem

The answer of that was essentially, no, but you could apply a class to the visible rows to make it work.

Community
  • 1
  • 1
ahillman3
  • 976
  • 7
  • 18
-2

CSS parses right-to-left. Have you tried flip-flopping the :not and :nth-of-type?

Why do browsers match CSS selectors from right to left?

Community
  • 1
  • 1
Paul Armstrong
  • 7,008
  • 1
  • 22
  • 36