nth-of-type

The :nth-of-type pseudo-class matches elements based on their position within the parent element's list of child elements of the same type.

This pseudo-class accepts an argument (N) which can be a number, keyword, or expression. To learn more about how to define :nth-of-type expressions, see my article How to Use :nth-child Pseudo-Class Expressions.

• CSS 3

:nth-of-type(N) { }
N can be:

• number - Any integer (1, 2, 10, etc.). This will match that exact item number
• expression An algebraic expression of the form an+b to allow you to match on more complex combinations
• odd - Matches every other element, starting with the first (odd) one.
• even - Matches every other element, starting with the second (even) one.

• Chrome 2
• Firefox 3.5
• Opera 9.5, 10
• Safari 3.1, 4

This pseudo-class is expected to be supported in Internet Explorer 9.

Select the third image in the body content:

body img:nth-of-type(3) { }

Select the even rows of a table:

tr:nth-of-type(even) { }

Select every fourth paragraph:

p:nth-of-type(4n)

Select every third paragraph starting with the first:

p:nth-of-type(3n-2)

See some nth-of-type examples in action.

You should always include the type of element before the colon (:) in the :nth-of-type declaration. Leaving it out may result in strange styles on your page.

If you leave off the (N) value in your :nth-of-type(N) selector, most browsers will simply ignore the selector.

More Information on the nth-of-type CSS Property

• nth-of-type Examples
• How to Use :nth-child Pseudo-Class Expressions
• Zebra Striped Tables with CSS 3
• Alternate Floated Images with CSS 3

More help with CSS 3
Return to the Style Library