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
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>
Search WWH ::

Custom Search