HTML and CSS Reference
In-Depth Information
p:nth-of-type(1) {
background-color: lightblue;
}
Figure 3-4 shows this style applied to the Cool Shoes & Socks page, in place of the
:nth-child(1)
rule. Now,
three
<p>
elements are given a background color of light blue.
Figure 3-4
A light blue background color applied to p:nth-of-type(1).
As with
:nth-child()
,
:nth-of-type()
has similar variants.
:nth-last-of-type()
allows for count-
ing elements of the same type from the last child.
:first-of-type
selects the first element of a specific type,
and
:last-of-type
selects the last element of a specific type. Finally,
:only-of-type
selects an element if it
is the only child of the specified type (it
can
have siblings, but only those that aren't of the same type).
:nth-child()
,
:first-of-type()
,
:last-of-type()
, and
:only-of-type()
aren't supported in
Internet Explorer versions 6, 7, and 8.
Selecting Empty Elements