nth-child Description:

The :nth-child pseudo-class matches elements based on their position within the parent element's list of child elements.

This pseudo-class accepts an argument (N) which can be a number, keyword, or expression. To learn more about how to define :nth-child expressions, see my article How to Use :nth-child Pseudo-Class Expressions.

nth-child in CSS Versions:

  • CSS 3

nth-child Syntax:

:nth-child(N) { }
N can be:

  • number - Any integer (1, 2, 10, etc.). This will match the child in that exact position
  • expression An algebraic expression of the form an+b to allow you to match on more complex combinations
  • odd - Matches every other child, starting with the first (odd) one.
  • even - Matches every other child, starting with the second (even) one.

nth-child Browser Support:

  • Chrome 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4

This pseudo-class is expected to be supported in Internet Explorer 9.

nth-child Examples:

Select the third child element (whatever it is) in the body content:

body :nth-child(3) { }

Select the even rows of a table:

tr:nth-child(even) { }

Select every fourth paragraph:

p:nth-child(4n) { }

Select every third paragraph starting with the first:

p:nth-child(3n-3) { }

See some nth-child examples in action.

nth-child Special Notes:

Remember to test your styles extensively. The nth-child selector counts every child in an element, and on complex pages it can be challenging to count the correctly.

If you leave off the (N) value in your :nth-child(N) selector, most browsers will simply ignore the selector.

More Information on the nth-child CSS Property

  • nth-child Examples
  • How to Use :nth-child Pseudo-Class Expressions
  • Zebra Striped Tables with CSS 3
  • Alternate Floated Images with CSS 3

More help with CSS 3
Return to the Style Library