HTML and CSS Reference
Table 13-1. Structural Pseudo-classes that Select First, Last, and Only Instances
Selects an element that is the first child of its parent.
Selects an element that is the last child of its parent.
Selects an element that is the only child of its parent and has no siblings.
Selects an element that is the first sibling of its type.
Selects an element that is the last sibling of its type.
Selects an element that is the only sibling of its type. It can have other siblings, but not of
the same type.
The difference between the “child” and “of-type” pseudo-classes lies in the relationship of the target element
to its parent. The :first-child pseudo-class applies to the first element nested inside its parent, whereas the
:first-of-type applies the first element of that particular type within its parent.
Take the following HTML markup in first-child.html in the ch13 folder:
<p>The Mediterranean has. . .</p>
In this example, the “Climate” heading is the first child of the aside<div> , so it's selected by the following
■ In this case, you could use either h3:first-child or h3:first-of-type because the first child is always
the first element of its type. But the first element of its type is not always the first child, as you'll see shortly.
The “Getting There” heading is nested deeper inside the <div> , so it ignores the h3:first-child style rule.
As Figure 13-1 shows, only the first heading is converted to uppercase.