HTML and CSS Reference
In-Depth Information
The most interesting pseudo-class in Table
13-6
is
:target
. This allows you to draw attention to the section
of a page that has been accessed through a link that ends with a
URL fragment
—a hash sign (#) followed by an
ID or anchor name. The style is applied only when the page is loaded through such a link, either from within the
same page or from an external link. At all other times, the style is ignored.
To demonstrate how the
:target
pseudo-class works, target1.html contains a large number of internal links
to descriptions of the first 12 chapters of this topic. All the headings have a white background when the page first
loads. If you click one of the links in the menu at the top of the page, the browser jumps to the relevant heading,
and the following style rule gives it a green background and some padding:
:target {
background-color:rgba(0,102,51,0.2);
padding: 3px;
}
Highlighting the target of a URL fragment is particularly useful when the target is so far down the page, that
the browser can't scroll it to the top, as shown in Figure
13-14
.
Figure 13-14.
The pseudo-class highlights the heading only when it's accessed through a link
The menu at the top of the page has the ID
menu
, which also gets a green background if you click one of the
“Back to menu” links. To prevent this from happening, target2.html combines the
:target
pseudo-class with the
:not()
pseudo-class like this:
:target
:not(#menu)
{
background-color: rgba(0,102,51,0.2);
padding: 3px;
}
The
:lang()
pseudo-class selects elements according to their language, as long as it's identified in some way
through the HTML markup or HTTP headers. For example, lang_pseudo-class.html contains several expressions
in French, which are wrapped in
<span>
elements with the
lang
attribute like this:
<p>The market is in the
<span lang="fr">Cours Saleya</span>,
just off the
<span lang="fr">Quai
des Etats Unis</span>
, near the Old Town (
<span lang="fr">Vieille Ville</span>
). . .</p>
