O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

:nth-of-type(an+b)

Applies to:

Any element

Description:

Matches every nth child that is of the same type as the element named, with the pattern of selection defined by the formula an+b, where a and b are <integer>s and n represents an infinite series of integers, counting forward from the first such element. Thus, to select every third paragraph (p) that is a child of the body element, starting with the first such paragraph, you write body > p:nth-of-type(3n+1). This will select the first, fourth, seventh, tenth, and so on child paragraphs of the body. This holds true even if other elements are interspersed between the various paragraphs, such as lists, tables, or other elements.

In place of the an+b formula, there are two keywords permitted: even and odd. These are equivalent to 2n and 2n+1, respectively.

Examples:

td:nth-of-type(even) {background-color: #FCC;}
img:nth-of-type(3n) {float: right; margin-left: 1em;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required