The Simplest Attribute Selector ..................................................................
Attribute selectors come in several varieties. The simplest version merely
looks for an attribute match and ignores the specifics of the attribute. In other
words, in the following code, if a <p>tag has a class— any class at all— a
match occurs. If you want any paragraph with the attribute class =in its tag
to be rendered italic, for example, you create this selector:
p[class] {font-style: italic;}
Notice that here you aren’t defining a class name(such as the alertin
p.alert). Instead, you’re merely specifying [class], which means any class
at all. So, this <p>element in the HTML is italicized because it has a class
attribute:
<p class=”red”>
This is red.
</p>
And this, too, is italicized. It has a class:
<p class=”signal”>
This is an important point!
</p>
Any <p>tag in the entire document with class=as an attribute in its tag —
regardless of the actual value specified following the equal sign — is itali-
cized. That’s the simplest kind of attribute selector.
Another type of attribute selector matches the “value” (the class XML is fre-
quently easy to use with this kind of matching). For example, say that you
run a car dealership’s Web site and the dealer wants every reference to a car
that’s on sale in boldface. Here’s how you can do that:
car[onSale] {font-weight: bold;}
This would cause the text of the first and second (but not the third) elements
in the following HTML to be boldfaced:
<car onSale=”5000”>Chevy</car>
<car onSale=”2999”>Ford</car>
<car>Maxim</car>
Only the Chevy and Ford text are boldface in this example. Why? Because
they have an onSaleattribute — that’s how the selector is specified.
52 Part I: The ABCs of CSS
