Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

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

Browser support full matrix
IE7 FF2 Saf3 Op9.5+
None None None Full
Spec
Version
CSS3

Example

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

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

Try it yourself!View all demos

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
}

Compatibility

IE5.5None
6.0None
7.0None
Firefox1.0None
1.5None
2.0None
Safari1.3None
2.0None
3.0None
Opera9.2None
9.5Full

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

User-contributed notes

There are no comments yet.

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

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters