HTML and CSS Reference
In-Depth Information
This strategy is very useful in XML documents, as XML languages tend to have element
and attribute names that are very specific to their purpose. Consider an XML language
that is used to describe planets of the solar system (we'll call it PlanetML). If you want
to select all
planet
elements with a
moons
attribute and make them boldface, thus calling
attention to any planet that has moons, you would write:
planet[moons] {font-weight: bold;}
This would cause the text of the second and third elements in the following markup
fragment to be boldfaced, but not the first:
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
In HTML documents, you can use this feature in a number of creative ways. For ex-
ample, you could style all images that have an
alt
attribute, thus highlighting those
images that are correctly formed:
img[alt] {border: 3px solid red;}
(This particular example is generally useful more for diagnostic purposes—that is, de-
termining whether images are indeed correctly marked up—than for design purposes.)
If you wanted to boldface any element that includes
title
information, which most
browsers display as a “tool tip” when a cursor hovers over the element, you could write:
*[title] {font-weight: bold;}
Similarly, you could style only those anchors (
a
elements) that have an
href
attribute,
thus applying the styles to any hyperlink but not to any named anchors.
It is also possible to select based on the presence of more than one attribute. You do
this simply by chaining the attribute selectors together. For example, to boldface the
text of any HTML hyperlink that has both an
href
and a
title
attribute, you would
write:
a[href][title] {font-weight: bold;}
This would boldface 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">Standards Info</a><br />
<a name="dead" title="Not a link">dead.letter</a>
Selection Based on Exact Attribute Value
You can further narrow the selection process to encompass only those elements whose
attributes are a certain value. For example, let's say you want to boldface any hyperlink
that points to a certain document on the web server. This would look something like:
a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}
