Skip to: content, navigation

:nth-of-type(N) (CSS selector)

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

Syntax

:nth-of-type( { 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 of the same type. This 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-of-type(N) matches elements that are preceded by N-1 siblings with the same element name in the document tree.

The following example selector matches the second, fifth, eighth, and so on, paragraphs in a div element, ignoring any children that aren’t paragraphs:

div>p:nth-of-type(3n-1) {
  ⋮ declarations
}

The following example selectors will allow the application of different CSS styles to the odd- and even-numbered image elements that are children of the element whose id attribute value matches "gallery":

#gallery>img:nth-of-type(odd) {
  ⋮ declarations
}
#gallery>img:nth-of-type(even) {
  ⋮ declarations
}

Example

The following example selector matches the first child paragraph in a div element:

div>p:nth-of-type(1) {
  ⋮ 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

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