SELECTORS - CSS: Professional Techniques for Modern Layout - page 58

Always remember that attribute values should be treated as case-sensitive. (It's just easier that
way.) h erefore, you'll get a match on the i rst two of the three examples to follow, but not the
third.
img[alt*="Figure"] { border : 1px solid gray ;}
< img src="fig1.gif" alt="Figure 1 . The larch." / >
< img src="fig2.gif" alt="Figure 2 . Mayor Quimby , a political figure of some note."
/ >
< img src="digg.gif" alt="Several men trying to figure out how to dig a hole." / >
h e third image isn't matched because “i gure” isn't the same as “Figure.” In this case, of course,
that might be seen as a good thing, since (based on the alt text) the third image doesn't
appear to be a i gure in the formal sense. It just happens to have the word “i gure” in its alt
value. h at's okay, but realize that the following would also be matched by the shown rule:
< img src ="lost.gif" alt ="Lost again. Figures, don't it?" />
Yep, there's that “Figure.” It's a match!
You can step around this limitation in cases where you know capitalization will vary by only
one letter. h us, if you wanted to make sure you selected all instances of “Figure” and “i gure,”
you would make the selector:
60
img[alt*="igure"] { border : 1px solid gray ;}
Of course, that will match any instance of those characters, including “coni gure,” “disi gure,”
and “oliguresis” (to name a few).
However, this isn't the end of substring selection—nor the beginning, as it were. See the next
section for an explanation.
MORE SUBSTRING ATTRIBUTE SELECTION
While arbitrary attribute value substring matching is nice (see preceding section), sometimes
you want to restrict where you look to just the beginning or end of an attribute's value.
Fortunately, there are ways to do just that.
If you want to select based on a substring at the beginning of an attribute value, use this
pattern:
a[href^="http"]
h anks to the caret ( ^ ), that rule selects any a whose href attribute starts with http . h is is
an easy way to select all the links that point to external sites, assuming that all of your internal
links are page- or site-relative and you never use the string http in your site's i le system. You
could do something simple, like this: