HTML and CSS Reference

In-Depth Information

Name

:nth-child(
a
n+
b
)

Applies to:

Any element

Description:

Matches every nth child with the pattern of selection defined by the formula an+b, where a

and bare
<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 bbe 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+bformula, 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;}