Jason Thomas12,518 Points
Why don't indices match parity?
The nth-child(even) returns elements from the collection with odd indices. Why? Lack of consistency just increases cognitive load.
Eric Butler31,883 Points
This was an interesting question. After thinking about it, here's my interpretation:
:nth-child and similar pseudo-classes are fed equations, not indexes:
:nth-child(an+b). To clarify,
:nth-child(even) is just an alias for
:nth-child(3) actually evaluates as
:nth-child(0n+3). I think it's pretty clear that multiplication is the same in all programming languages, so for example 5n is five times n, and n increments up in a typical programming loop. Here's where I think the misconception is: when you write, for example,
:nth-child(5n+1), it seems like the "1" there is selecting the 1st item in that 5-item group, but actually what it's doing is multiplying 5 * n to get the 5th item, then offsetting the selection 1 more to get what is, for that instance of the 5n loop, item 6 -- which is, coincidentally, the 1st instance in the next group. And since n is evaluated to infinity in both directions, it selects the 1st item as the offset when n = 0.
Bottom line: it's the multiplier, not an index, that's 1-based, because that's how math works. There is no index, just a multiplier (that selects the item at the end of each grouping) and an offset (that pushes the selection over into the next grouping).
Here is the official CSS spec, if you want to ponder things further.