HTML and CSS Reference
In-Depth Information
This will boldface the text of any a element that has an href attribute with exactly the
value . Any change at all, even dropping the
www. part, will prevent a match.
Any attribute and value combination can be specified for any element. However, if that
exact combination does not appear in the document, then the selector won't match
anything. Again, XML languages can benefit from this approach to styling. Let's return
to our PlanetML example. Suppose you want to select only those planet elements that
have a value of 1 for the attribute moons :
planet[moons="1"] {font-weight: bold;}
This would boldface the text of the second element in the following markup fragment,
but not the first or third:
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
As with attribute selection, you can chain together multiple attribute-value selectors to
select a single document. For example, to double the size of the text of any HTML
hyperlink that has both an href with a value of and a title attribute
with a value of W3C Home , you would write:
a[href=""][title="W3C Home"] {font-size: 200%;}
This would double the text size of the first link in the following markup, but not the
second or third:
<a href="" title="W3C Home">W3C</a><br />
<a href=""
title="Web Standards Organization">Standards Info</a><br />
<a href="" title="W3C Home"></a>
The results are shown in Figure 1-10 .
Figure 1-10. Selecting elements based on attributes and their values
Again, this format requires an exact match for the attribute's value. Matching becomes
an issue when the selector form encounters values that can in turn contain a space-
separated list of values (e.g., the HTML attribute class ). For example, consider the
following markup fragment:
<planet type="barren rocky">Mercury</planet>
The only way to match this element based on its exact attribute value is to write:
planet[type="barren rocky"] {font-weight: bold;}
Search WWH ::

Custom Search