Wednesday, November 10, 2010

nth-child vs. eq CSS selectors

The eq() and nth-child() CSS selectors are not the same..

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Or how someone else explains it....

:eq() selects an element based on it's index in the array of selected elements.
:nth-child() selects all elements that are the nth child of their parent.

No comments:

Post a Comment