HTML and CSS Reference
In-Depth Information
The order of the words doesn't actually matter;
warning urgent
would also suffice and
would yield precisely the same results no matter what CSS is written.
Now let's say you want all elements with a
class
of
warning
to be boldfaced, those with
a
class
of
urgent
to be italic, and those elements with both values to have a silver
background. This would be written as follows:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}
By chaining two class selectors together, you can select only those elements that have
both class names, in any order. As you can see, the HTML source contains
class="urgent warning"
but the CSS selector is written
.warning.urgent
. Regardless,
the rule will still cause the “When handling plutonium . . . ” paragraph to have a silver
background, as illustrated in
Figure 1-8
. This happens because the order the words are
written in doesn't matter. (This is not to say the order of classes is always irrelevant,
but we'll get to that later in the topic.)
Figure 1-8. Selecting elements with multiple class names
If a multiple class selector contains a name that is not in the space-separated list, then
the match will fail. Consider the following rule:
p.warning.help {background: red;}
As you would expect, the selector will match only those
p
elements with a
class
con-
taining the words
warning
and
help
. Therefore, it will not match a
p
element with just
the words
warning
and
urgent
in its
class
attribute. It would, however, match the fol-
lowing:
<p class="urgent warning help">Help me!</p>
