CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 231

preceding code; that is how you would write a comment in CSS that is ignored by the
web browser.
Take a close look at that last line of code, p.critical… ; that is two simple select-
ors placed together, that of a type selector and a class selector. This is where compound
selectors get their name, because they are simple selectors that have been compounded
together. It's important to note that they always begin with a type selector, a universal
selector, or no selector (in which case a universal selector is implied). After the type se-
lector, they can have a long chain of additional simple selectors. Here's an example:
em.alert.critical.item { }
This selector would only reference an HTML element that was of the correct type and
had the correct classes applied, such as the following:
<em class="alert critical item">Rocket fuel</em>
Note More than two kinds of selectors can be combined; for example,
em.alert.critical#item is a valid compound selector, but in practice this is
unnecessarily verbose because there should be only one element with the ID of item
on the page, so the inclusion of the class selectors (or even the type selector) would not
be necessary.
Compound selectors are powerful, but there are other syntactic options available to
match a variety of HTML structures. Let's move on to complex selectors!
Combinators and complex selectors
Table 6-4 lists a set of syntax rules called combinators , which determine how the rela-
tionship between different HTML elements can be described for the purposes of refer-
encing them with a selector.