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

.weather {
background-image : url(/pix/panel-weather.jpg) ;}
.stocks {
background-image : url(/pix/panel-stocks.jpg) ;}
.latest {
background-image : url(/pix/panel-latest.jpg) ;}

.panel.weather { font-weight : bold ;}
.latest.panel { color : #511 ;}

h e order you write the classes in the HTML source doesn't matter to the order you write
them in the style sheet; .panel.weather has exactly the same ef ect as .weather.
panel , right down to the specii city, and no matter which order the two are listed in the
HTML source. It also doesn't matter if they're separated by other class names in the source,
like so:

< div class ="weather alert tornado watch panel">

h at element will still be selected by both .panel.weather and .weather.panel .

One slowly fading note of caution: IE6 (and earlier) gets confused by multiclassing in your
style sheet. Where you write .panel.weather , it only sees .weather . You can still have
multiple class names in the HTML and address them from your CSS, but you can only do it
one class name at a time. So .weather and .panel will work just i ne in IE6, correctly
matching the example markup from before. It will just assume that .weather.panel
applies to any element with a class value containing the word panel , which probably isn't
what you want.

54

SIMPLE ATTRIBUTE SELECTION
Attribute selectors were introduced in CSS2 and expanded upon in CSS3, and are as of this
writing supported by all major browsers. (h ey were not supported in IE6; if that's a concern,
see the section "IE9.js" in Chapter 1.)

h e basic idea is that you can select elements based on their having an attribute, or based on
some aspect of the value of an element's attribute. So you can select all a elements that are
actually hyperlinks, like this:

a[href]

h at selects any a element that has an href attribute. h erefore, it does not select any a
element that lacks an href attribute, named anchors (for example, <a name="top"> )
being the most obvious example. It's basically a more compact version of a:link,
a:visited . For example:

a[href] { color : green ;}

… produces the screen shown in Figure 2-10.