2.4 Attribute Selectors

When it comes to both class and ID selectors, what you're really doing is selecting values of attributes. The syntax used in the previous two sections is particular to HTML, SVG, and MathML documents (as of this writing). In other markup languages, these class and ID selectors may not be available. To address this situation, CSS2 introduced attribute selectors, which can be used to select elements based on their attributes and the values of those attributes. There are four types of attribute selectors.

Attribute selectors are supported by the Opera and Gecko browsers but not by Internet Explorer through IE5/Mac and IE6/Win.

2.4.1 Simple Attribute Selection

If you want to select elements that have a certain attribute, regardless of the attribute's value, you can use a simple attribute selector. For example, to select all h1 elements that have a class attribute with any value and make their text silver, write:

h1[class] {color: silver;}

So given the following markup:

<h1 class="hoopla">Hello</h1>
<h1 class="severe">Serenity</h1>
<h1 class="fancy">Fooling</h1>

you get the result shown in Figure 2-10.

Figure 2-10. Selecting elements based on their attributes

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 example, 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 useful more for diagnostic purposes—that is, determining whether images are indeed correctly formed—than for design purposes.)

If you wanted to boldface any element that includes title information, which most browsers display as a "tooltip" 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.

It is also possible to select based on the presence of more than one attribute. This is done 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 title="Not a link">dead.letter</a>

2.4.2 Selection Based on Exact Attribute Value

In addition to selecting elements with attributes, you can further narrow the selection process to encompass only those elements whose attributes are a certain value. For example, let's you we 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;}

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 first and second elements 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 hyperlink that has both an href with a value of http://www.w3.org/ and a title attribute 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 2-11.

Figure 2-11. Selecting elements based on attributes and their values

Note that this format requires an exact match for the attribute's value. Matching becomes an issue when the 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;}

If you had written planet[type="barren"], the rule would not have matched the example markup and thus would have failed. This is true even for the class attribute in HTML. Consider:

<p class="urgent warning">When handling plutonium, care must be taken to 
avoid the formation of a critical mass.</p>

To select this element based on its exact attribute value, you would have to write:

p[class="urgent warning"] {font-weight: bold;}

This is not the dot-class notation we covered earlier.

Also, be aware that ID selectors and attribute selectors that target the id attribute are not precisely the same. In other words, there is a subtle but crucial difference between h1#page-title and h1[id="page-title"]. This difference is explained in the next chapter.

2.4.3 Selection Based on Partial Attribute Values

For any attribute that accepts a space-separated list of words, it is possible to select based on the presence of any one of those words. The classic example in HTML is the class attribute, which can accept one or more words as its value. Consider our usual example text:

<p class="urgent warning">When handling plutonium, care must be taken to 
avoid the formation of a critical mass.</p>

Let's say you want to select elements whose class attribute contains the word warning. You can do this with an attribute selector:

p[class~="warning"] {font-weight: bold;}

Note the presence of the tilde (~) in the selector. It is the key to selection based on the presence of a space-separated word within the attribute's value. If you omit the tilde, you would have an exact-value matching requirement, as discussed in the previous section.

This selector construct is equivalent to the dot-class notation discussed earlier. Thus, p.warning and p[class~="warning"] are equivalent when applied to HTML documents. Let's return to our previous XML example:

<planet type="barren rocky">Mercury</planet>
<planet type="barren cloudy">Venus</planet>
<planet type="life-bearing cloudy">Earth</planet>

In order to make all elements with the word barren in their type attribute italicized, you write:

planet[type~="barren"] {font-style: italic;}

This rule's selector will match the first two elements in the example XML and thus italicize their text, as shown in Figure 2-12.

Figure 2-12. Selecting elements based on portions of attribute values

Even in HTML, this form of attribute selector can be useful. For example, you might have a document that contains a number of images, only some of which are figures. You can use a partial-value attribute selector aimed at the title text to select only those figures:

img[title~="Figure"] {border: 1px solid gray;}

This rule will select any image whose title text contains the word Figure. Therefore, as long as all your figures have title text that looks something like "Figure 4. A bald-headed elder statesman," the rule above will match those images. For that matter, the selector img[title~="Figure"] will also match a title attribute with the value "How To Figure Out Who's In Charge." Any image that does not have a title attribute, or whose title value doesn't contain the word "Figure," won't be matched.

2.4.4 A Particular Attribute Selection Type

A fourth type of attribute selector, the particular attribute selector, is easier to show than it is to describe. Consider the following rule:

*[lang|="en"] {color: white;}

This rule will select any element whose lang attribute is equal to en or begins with en-. Therefore, the first three elements in the following example markup would be selected, but the last two would not:

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

In general, the form [att|="val"] can be used for any attribute and its values. Let's say you have a series of figures in an HTML document, each of which has a filename like figure-1.gif and figure-3.jpg. You can match all of these images using the following selector:

img[src|="figure"] {border: 1px solid gray;}

The most common use for this type of attribute selector is to match language values, as demonstrated later in this chapter.