HTML and CSS Reference
In-Depth Information
As these examples have shown, classes can be used to significantly reduce the number
of style rules necessary in a document.
Contextual Selection
Although the
class
and
id
attributes provide a great deal of flexibility for creating style
rules, many other types of rules of equal value exist. For example, it might be useful to specify
that all
<strong>
tags that occur within a
<p>
tag get treated in a certain way, as compared to
the same elements occurring elsewhere within the document. To create such a rule, you must
use
contextual selection
. Contextual selectors are created by showing the order in which the
tags must be nested for the rule to be applied. The nesting order is indicated by a space
between each selector. For example, given the rule
p strong {background-color: yellow;}
all occurrences of the
strong
element within a
p
element have a yellow background. Other
occurrences of
strong
without a
p
ancestor element might not necessarily have the yellow
background.
T
IP
Be careful about the use of the space and comma in CSS selectors; it is easy to turn grouping
into contextual selection or vice versa with a simple typo.
Contextual selection does not require a direct parent-child relationship with elements.
For example, with the rule in the preceding example, you would find that given
<p>
This
<span>
is not
<strong>
directly
</strong>
within
</span>
the paragraph.
</p>
