HTML and CSS Reference
In-Depth Information
Figure 3-3
A light blue background color applied to p:nth-child(1).
The
<p>
element within the “What Our Customers Are Saying” section is given a light blue background because
that is the only
<p>
element to be a first child among its siblings. The first child
<p>
elements within the content
and newsletter sections are headings and not paragraphs, which is why the first paragraphs in those particular sec-
tions are not given the same background color.
Be aware that
:nth-child(1)
represents the first element, which can also be expressed as
:first-child
.
Similarly, you can use
:last-child
to select the last element, or if you want to start counting from the last child,
you can use
:nth-last-child()
, where
:nth-last-child(1)
is the last element and
:nth-last-
child(2)
is the element next to the last.
You can also select an element if it is the only child of its parent (it has no siblings), using
:only-child
.
nth-child()
isn't supported in Internet Explorer versions 6, 7, and 8.
Selecting Child Elements of a Particular Type
Where
:nth-child()
selects a child element based on its position among its siblings (regardless of what types of
element they are),
:nth-of-type()
does the same but counts only siblings of the same type:
