HTML and CSS Reference
In-Depth Information
If there is potential ambiguity between two contextual styles, the more
specific context prevails.
Like individual tags, you may have several contextual selectors mixed
with individual selectors, separated by commas, sharing the same list of
style declarations. For example:
h1 em, p strong, address {color: red}
means you'll see red whenever the
<em>
tag appears within an
<h1>
tag,
when the
<strong>
tag appears within a
<p>
tag, and for the contents of
the
<address>
tag.
The nesting need not be exact to match the rule. For example, if you
nest the
<strong>
tag within a
<ul>
tag within a
<p>
tag, you'll still match
the rule for
p strong
that we defined earlier. If a particular nesting
matches several style rules, the most specific rule is used. For example,
if you defined two contextual selectors:
p strong {color: red}
p ul strong {color: blue}
and you use the sequence
<p><ul><strong>
in your document, the
second, more specific rule applies, coloring the contents of the
<strong>
tag blue.
8.2.4. Universal, Child, and Adjacent Selectors
The CSS2 standard defines additional patterns for selectors besides
commas and spaces, as illustrated in the following examples:
* {color: purple; font: ZapfDingBats}
ol > li {font-size: 200%; font-style: italic}
h1 + h2 {margin-top: +4mm}
