1. Technology

nth-of-type

By

nth-of-type Description:

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.

nth-of-type in CSS Versions:

nth-of-type Syntax:

: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.

nth-of-type Browser Support:

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

nth-of-type Examples:

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.

nth-of-type Special Notes:

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

More help with CSS 3
Return to the Style Library

©2014 About.com. All rights reserved.