HTML and CSS Reference
In-Depth Information
ul li:first-child {
background-color: #000;
}
This selector is saying, “Select the
<li>
ele-
ments that are the first child of their
respective
<ul>
elements.”
Selecting the last element is also straight-
forward with the
:last-child
pseudo-class:
ul li:last-child {
background-color: #000;
}
This selector is saying, “Select the
<li>
ele-
ments that are the last child of their <
ul>
parent elements.”
You don't have to apply these pseudo
—
classes to a particular
element. They can be used standalone. See if you can work out which
elements this CSS rule will select. The answer is further down:
ul :last-child { background-color: #000; }
Pseudo-classes can be used with descen-
dent or child combinators like any other
simple selector. Compare this with the pre-
vious example:
li:last-child {
background-color: #000;
}
li:last-child a {
background-color: #fff;
}
The extra rule selects all
<a>
elements that
descend from an
<li>
element that is a last
child. This rule has been used to make the
link visible.
