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
http://www.css-discuss.org/about.html
. 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>Venus</planet>
<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
with a value of
W3C Home
, you would write:
a[href="http://www.w3.org/"][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="http://www.w3.org/" title="W3C Home">W3C</a><br />
<a href="http://www.webstandards.org"
title="Web Standards Organization">Standards Info</a><br />
<a href="http://www.example.org/" title="W3C Home">dead.link</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;}
