HTML and CSS Reference
In-Depth Information
Name
:nth-of-type(
a
n+
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 aand bare
<integer>
s and n represents an in-
finite 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+bformula, 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;}
