CSS: The Definitive Guide, 3rd Edition by Eric A. Meyer

For example,
     you may want boldface text only when an entire paragraph is a warning:
p.warning {font-weight: bold;}
    The selector now matches any
p
elements that
     have a
class
attribute containing the word
warning
, but no other elements of any kind,
     classed or otherwise. The selector
p.warning
translates to: "Any paragraph whose
class
attribute contains the word
warning
." Since the
span
element is not a paragraph, the rule's
     selector doesn't match it, and it won't be converted to bold text.
    If you did want to assign different styles to the
span
element, you could use the selector
span.warning
:
p.warning {font-weight: bold;}
span.warning {font-style: italic;}
    In this case, the warning paragraph is boldfaced, while the warning
span
is italicized. Each rule applies only to a specific
     type of element/class combination, so it does not leak over to other elements.
    Another option is to use a combination of a general class selector and an
     element-specific class selector to make the styles even more useful, as in the
     following markup:
.warning {font-style: italic;}
span.warning {font-weight: bold;}
    The results are shown in Figure 2-8 .
    Figure 2-8. Using generic and specific selectors to combine styles
    In this situation, any warning text will be italicized, but only the text within a
span
element and text with a
class
of
warning
will
     be boldfaced and italicized.
    Notice the format of the general class selector in the previous example: it's
     simply a class name preceded by a period without any element name. In cases where you
     only want to select all elements that share a class name, you can omit the universal
     selector from a class selector without any ill effects.
    Multiple Classes
    In the previous section, we dealt with
class
values that contained a single word. In HTML, it's
     possible to have a space-separated list of words in a single
class
value. For example, if you want to mark a particular element as
     being both urgent and a warning, you could write:

When handling plutonium, care must be taken to
avoid the formation of a critical mass.

With plutonium, the possibility of implosion is
very real, and must be avoided at all costs. This can be accomplished
by keeping the various masses separate.

    The order of the words doesn't actually matter;
warning
     urgent
would also suffice.
    Now let's say you want all elements with a
class
of
warning
to be boldface, 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 2-9 .
    Figure 2-9. 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
containing 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 following:

Help me!

    Warning
    In versions previous to IE7, Internet Explorer for both platforms has problems
     with correctly handling multiple class selectors. In these older versions,
     although you can select a single class name out of a list, selecting based on
     multiple names in a list does not work properly. Thus,
p.warning
would work as