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.
Search WWH ::

Custom Search