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 {
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>
Search WWH ::

Custom Search