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

img[alt^="Figure"] {border: 2px solid gray; display: block; margin: 2em auto;}
The potential drawback here is that any img element whose alt starts with “Figure”
will be selected, whether or not it's meant to be an illustrative figure. The likeliness of
that occurring depends on the document in question, obviously.
One more use case is selecting all of the calendar events that occur on Mondays. In this
case, all of the events have a title attribute containing a date in the format “Monday,
March 5th, 2012.” Selecting them all is a simple matter of [title^="Monday"] .
Matching a substring at the end of an attribute value
The mirror image of beginning-substring matching is ending-substring matching,
which is accomplished using the [att$="val"] pattern. A very common use for this
capability is to style links based on the kind of resource they target, such as separate
styles for PDF documents, as illustrated in Figure 1-14 .
a[href$=".pdf"] {font-weight: bold;}
Figure 1-14. Selecting elements based on substrings that end attribute values
Similarly, you could (for whatever reason) select images based on their image format:
img[src$=".gif"] {...}
img[src$=".jpg"] {...}
img[src$=".png"] {...}
To continue the calendar example from the previous section, it would be possible to
select all of the events occurring within a given year using a selector like [title
$="2012"] .
A Particular Attribute Selection Type
The last 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>