HTML and CSS Reference
In-Depth Information
:link { color: blue; }
:visited { color: purple; }
:hover { color: green; }
:focus { color: orange; }
:active { color: red; }
The
:link
pseudo-class selects all elements that are hyperlinks (which you'll learn much more about in
Chapter 6). The
:visited
pseudo-class selects hyperlinks whose destination has been previously visited
(recorded in a web browser's built-in history). The
:hover
pseudo-class selects any element that is being
“hovered” over by a user's pointing device. Although any element can be in a hover state, this most
commonly applies to links (and some older browsers supported this pseudo-class only for links and no
other elements). The
:focus
pseudo-class selects any element in a focused state (including links), and
the
:active
pseudo-class selects links in an active state, that interval when the link is being activated
(while clicking a mouse or pressing the Enter or Return key).
Descendant Selector
One of the most useful and powerful selectors in the CSS arsenal, a
descendant selector
is assembled
from two or more other selector types, separated by spaces, to select elements matching that particular
context in the document (these are also called
contextual selectors
). An element nested within another
element is called a
descendant
, and its containing element is its
ancestor
. We'll explain these terms in
more depth in Chapter 3. But first, here's a style rule with a simple descendant selector:
.introduction em { color: yellow; }
That rule will select any
em
element that is itself within (descended from) any element with the
class
value
“introduction” and apply a yellow text color. Descendant selectors allow for very precise selection of just
the elements you want to target, based on the structure of your HTML document.
For a more elaborate example, the portion of HTML in Listing 2-1 shows an
article
element containing a
section
element that in turn contains a paragraph (the
p
element) that contains a link (the
a
element;
you'll learn more about all of these elements in coming chapters).
Listing 2-1.
Nested descendant elements
<article id="main">
<section class="introduction">
<p>Power Outfitters Superhero Costume and Supply Company is
located in a nondescript building on Kirby Ave, a site that
once housed a <a href="
http://example.com/Sinnott_Inkworks">
large printing plant</a>. Behind their modest storefront
is an expansive warehouse positively packed to the portholes
with paraphernalia.</p>
</section>
</article>
A more complex descendant selector can target links in that very specific context:
#main .introduction p a { font-weight: bold; }
