HTML and CSS Reference
In-Depth Information
Figure 13-1.
The first heading is converted to uppercase
But the
<h3>
heading is no longer the first child if you precede it with a skip link like this:
<div id="aside">
<a href="#main">Skip to main content</a>
<h3>Climate</h3>
Adding the link before the
<h3>
heading prevents
h3:first-child
from working. If you test first-child_skip.
html, the first heading is no longer in uppercase. However, it's the first element of its type within the
<div>
, so you
can use
h3:first-of-type
to select it like this (the code is in first-of-type.html):
h3:
first-of-type
{
text-transform: uppercase;
}
If you test first-of-type.html, the first
<h3>
heading is in uppercase, but the second one is a mixture of
uppercase and lowercase as before (see Figure
13-1
).
The other pairs of pseudo-classes work the same way. With
:last-child
, the target must be the last element
inside its parent, whereas with
:last-of-type
, other elements of a different type can follow. With
:only-child
,
no other elements can be nested inside the parent. The
:only-of-type
pseudo-class targets an element that's the
only one of its kind among other siblings.
■
There's considerable overlap between these pseudo-classes. sometimes, first, last, and only refer to the
same element. Choosing the right one often requires careful thought. The “of-type” pseudo-classes are more flexible,
but the “child” pseudo-classes give a finer level of control. For example, using
:first-child
means “apply this
style only if nothing else precedes this element.”
Tip
