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

Spec
Version
CSS3
Browser support (more…)
IE8 FF3.5+ SA3.1+ OP9.5+ CH2+
None Full Full Full 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 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 pseudo-class is currently not supported in Internet Explorer.

User-contributed notes

Related Products