:nth-child(N) (CSS selector)

Browser support (more…)
IE8 FF3.5+ SA3.1+ OP9.5+ CH2+
None Full Full Full Full


:nth-child( { number expression | odd | even } ) {
declaration block


This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. For more information, see Understanding :nth-child Pseudo-class Expressions.

If N is a number or a number expression, :nth-child(N) matches elements that are preceded by N-1 siblings in the document tree.

The following example selectors are equivalent, and will match odd-numbered table rows:

tr:nth-child(2n+1) {
  ⋮ declarations
tr:nth-child(odd) {
  ⋮ declarations

This example selector will match the first three rows of any table:

tr:nth-child(-n+3) {
  ⋮ declarations

This example selector will match any paragraph that’s the first child element of its parent element:

p:nth-child(1) {
  ⋮ declarations

This is, of course, equivalent to the selector p:first-child.


This example selector will match odd-numbered table rows:

tr:nth-child(odd) {
  ⋮ declarations


Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None None None None None Full None None Full Full None Full Full Full

This pesudo-class is currently not supported in Internet Explorer.

User-contributed notes

by twelvelabs
Wed, 16 Apr 2008 23:39:04 GMT

nth-child works correctly in Safari 3

Related Products