1. Computing

Discuss in my forum

nth-child

By

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:

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:

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

More help with CSS 3
Return to the Style Library

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS Pseudo Properties
  6. nth-child Pseudo-Class - CSS Style Property - nth-child

©2014 About.com. All rights reserved.