Selectors - Selectors, Specificity, and the Cascade - page 18

If you were to write planet[type="barren"] , the rule would not match the example
markup and thus would fail. This is true even for the class attribute in HTML. Consider
the following:
<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 equivalent to the dot-class notation covered earlier, as we will see in the next
section. Instead, it selects any p element whose class attribute has exactly the value
urgent warning , with the words in that order and a single space between them. It's
effectively an exact string match.
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 chap-
ter in the section on specificity.

Selection Based on Partial Attribute Values
The CSS Selectors Level 3 module, which became a full W3C Recommendation in late
2011, contains a few partial-value attribute selectors—or, as the specification calls
them, “substring matching attribute selectors.” These are summarized in Table 1-1 .

Table 1-1. Substring matching with attribute selectors

Type Description

[foo~="bar"] Selects any element with an attribute foo whose value contains the word bar in a space-separated

list of words.

[foo*="bar"] Selects any element with an attribute foo whose value contains the substring bar .

[foo^="bar"] Selects any element with an attribute foo whose value begins with bar .

Selects any element with an attribute foo whose value ends with bar .

[foo$="bar"]

Matching one word in a space-separated list
For any attribute that accepts a space-separated list of words, it is possible to select
elements 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;}