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

At this point you may be thinking, “Hey, awesome. I always wanted to know how I could
select classes with a longer and more complicated syntax.” Ah, but remember: Attribute
selectors are not coni ned to the paltry two attributes we're used to selecting upon—namely,
class and id . You can select based on any attribute whose value can be a space-separated
list of words, where by “words,” I mean “strings of characters.”

Here are a few examples of other ways to use this kind of selector.

img[alt~="figure"]

Any image whose alternate text contains the word “fi gure”

table[summary~="data"]

Any table whose summary text contains the word “data”

*[title~="2009"]

Any element whose title text contains the word “2009”

ID VS. ATTRIBUTE SELECTOR
You can use attribute selectors not only as a long-winded way to replace class selectors, but
also as ID selectors. h e following two rules will select the same element:

p#lead-in { font-weight : bold ;}
p[id="lead-in"] { font-weight : normal ; font-style : italic ;}

Okay, i ne, but take a moment to contemplate the visual result of those two rules: h e lead-in
paragraph will be both boldfaced and italicized, as in Figure 2-12.

57

h is is because the specii city contribution of an attribute selector is 0,0,1,0—the same as a
class or pseudo-class. So the i rst rule's specii city is 0,1,0,1 and the second's is 0,0,1,1. In this
i ght over font-weight , the i rst rule shown wins due to its higher specii city.

h is is one of those interesting little wrinkles in specii city that can open the door to new
patterns of authoring. For example, you may remember the earlier discussion in “ID vs. Class”
about how IDs easily trump classes and so you might consider just labeling everything with
classes. If your user base is all on browsers that support attribute selectors, then you can go
back to a mixture of IDs and classes and then just use attribute selectors whenever you need
to reference an ID. h at way, you don't have to worry about an #ID selector pattern trumping
the specii city of everything else you try to write.