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-child(an+b)

Applies to:

Any element

Description:

Matches every nth child 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 child. Thus, to select every fourth child of the body element, starting with the first child, you write body > *:nth-child(4n+1). This will select the first, fifth, ninth, fourteenth, and so on children of the body. If you literally wish to select the fourth, eighth, twelfth, and so on children, you would modify the selector to body > *:nth-child(4n). It is also possible to have b be negative, so that body > *:nth-child(4n-1) selects the third, seventh, eleventh, fifteenth, and so on children of the body.

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:

*:nth-child(4n+1) {font-weight: bold;}
tbody tr:nth-child(odd) {background-color: #EEF;}

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