HTML and CSS Reference
In-Depth Information
*:target {border-left: 5px solid gray; background: yellow url(target.png)
top right no-repeat;}
Figure 1-40. Styling a fragment identifier target
Somewhat obviously,
:target
styles will not be applied in two circumstances:
1. If the page is accessed via a URL that does not have a fragment identifier.
2. If the page is accessed via a URL that has a fragment identifier, but the identifier
does not match any elements within the document.
More interestingly, though, what happens if multiple elements within a document can
be matched by the fragment identifier—for example, if there are three separate instan-
ces of
<a name="target-pseudo">
in the same document?
The short answer is that CSS doesn't have or need rules to cover this case, because all
CSS is concerned with is styling targets. Whether the browser picks just one of the three
elements to be the target or designates all three as co-equal targets,
:target
styles should
be applied to anything that is a target.
The :lang Pseudo-Class
For situations where you want to select an element based on its language, you can use
the
:lang()
pseudo-class. In terms of its matching patterns, the
:lang()
pseudo-class
is exactly like the
|=
attribute selector. For example, to italicize elements whose content
is written in French, you could write either of the following:
*:lang(fr) {font-style: italic;}
*[lang|="fr"] {font-style: italic;}
The primary difference between the pseudo-class selector and the attribute selector is
that language information can be derived from a number of sources, some of which are
outside the element itself. As Selectors Level 3 states:
