HTML and CSS Reference
In-Depth Information
Figure 1-34. Combining patterns of :nth-child() and :nth-last-child()
Selecting every nth of a type
In what's no doubt become a very familiar pattern, the
:nth-child()
and
:nth-last-
child()
pseudo-classes have analogues in
:nth-of-type()
and
:nth-last-of-type()
.
You can, for example, select every other hyperlink that's a child of any given paragraph,
starting with the second, using
p > a:nth-of-type(even)
. This will ignore all other
elements (
span
s,
strong
s, etc.) and consider only the links, as demonstrated in
Figure 1-35
:
p > a:nth-of-type(even) {background: blue; color: white;}
Figure 1-35. Selecting the even-numbered links
If you wanted to work from the last hyperlink backwards, then of course you'd use
p
> a:nth-last-of-type(even)
.
As before, these select elements of a type from among their sibling elements,
not
from
among all the elements of a type within the entire document as a single group. Each
element has its own list of siblings, and selections happen within each group.
