CHAPTER 11. HOVER AND PSEUDO CLASSES 119
The even and odd choices, (2n) and (2n+1), are helpful in tables when we
might want alternating rows to be distinct, with a slighly different back-
ground color for example.
:nth-child- Use:nth-child(2n)to style alternating list items or table
rows to have different background colors.
The “child” pseudo classes do their counting based on the immediate parent
of the item, no matter what type the other children are. Sometimes we want
to count only items of a certain type. Then we can use the “of type” pseudo
classes. Here for illustration we will use the bold tag within a paragraph.
(Not that you would ever want to do this, but just for illustration.)
b:first-of-type { ... } / first bold /
b:nth-of-type(2) { ... } / second /
b:nth-of-type(2n) { ... } / even bolds /
b:nth-of-type(2n+1) { ... } / odd bolds /
b:last-of-type { ... } / last bold /
b:nth-last-of-type(2) { ... } / bold before last /
b:only-of-type { ... }
If more than one of these pseudo-classes matches, the latest one specified
will take effect. Thus, if you specify only-child and then specify first-child,
first-child will win. Normally you should specify the most general things
first and the most specific things last.
Exam Question 211(p.348): If two CSS specs apply to the same item,
which takes precedence, the first specified or the last specified?
Required Answer:last
11.4 Hover and Focus
The :hover pseudo-class targets objects that have the mouse hovering over
them. The mouse often indicates the portion of the webpage that the user
is most interested in.
Note that not all devices have mice. This pseudo-class works great for
normal computers but not so great for iPads or smart phones.
Exam Question 212(p.348): What pseudo-class targets an item when
you move the mouse across it?