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: {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-
<p class="urgent warning help">Help me!</p>
Search WWH ::

Custom Search