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;}
