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="">
large printing plant</a>. Behind their modest storefront
is an expansive warehouse positively packed to the portholes
with paraphernalia.</p>
A more complex descendant selector can target links in that very specific context:
#main .introduction p a { font-weight: bold; }
Search WWH ::

Custom Search