jQuery :odd and :nth-child CSS3 different

Question

I found that jQuery :odd selector and CSS3 nth-child(odd) works different. http://jsfiddle.net/TMDwT/5/

In yellow it's CSS nth-child(odd) and if you uncomment JS and comment background: yellow in CSS you will find that it found in another way.

Can anybody say how I achieve the same result as in jQuery but with CSS3?

Thanks!

Answer 1

Yes, :odd and :nth-child(odd) are not the same thing:

• :odd matches the odd items within the matched elements, i.e. the contents of the jQuery object you apply the selector to,

• :nth-child(odd) matches the odd items within their respective parents.

This is the same difference as between :first and :first-child, or :last and :last-child.

Update: As zzzzBov and BoltClock rightfully point out, the :odd selector is zero-based but the :nth-child() selector is one-based. This means that even if you apply the two selectors to the complete child list of an element (thus removing the difference between :odd and :nth-child(odd)), they still won't match the same elements.