Skip to: content, navigation

:nth-child(N) (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE7 FF2 SA3 OP9.5+
None None None Full

Syntax

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

Description

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.

Example

This example selector will match odd-numbered table rows:

tr:nth-child(odd) {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
None None None None None None None None None None Full

This pseudo-class is currently supported only by Opera 9.5 and the Konqueror web browser.

User-contributed notes

ID:
#3
Contributed:
by quasarkitten
Date:
Mon, 07 Sep 2009 09:56:44 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

:nth-child(N) works in Safari 4, Firefox 3.5, and Chrome 1+, but still doesn't work in IE8.

ID:
#1
Contributed:
by twelvelabs
Date:
Wed, 16 Apr 2008 23:39:04 GMT

nth-child works correctly in Safari 3

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search