Descending deeper ............................................................................
Can you go deeper into descendants by adding yet another condition to the
previous style? Sure. Say that you sometimes want to add a blue background
to a few words inside strongtext within a bold sentence. You can specify
that any <span>within a <strong>(that itself is within a <b>) must have
a blue background. This is a three-level contextual selector. It says, “Add a
blue background if a spanis the child of a strongand the descendant of a b.”
Here’s this style, and the result is shown in Figure 14-7:b strong span{background-color:blue}Here’s yet another shortcut. What if you want to define multiple contextual
selectors using the same style. What if, for example, you wanted b strong
span’s blue background to also be used when italics appeared with an h2
headline? You don’t have to create a separate style definition, just use a comma
to separate the contextual selectors, just as you would when grouping normal
selectors:b strong span, h2 i {background-color:blue}After you’ve described a style for a contextual selector, that style is also
inherited by any children of the selector, indeed by any descendant of that
selector all the way down the tree. (Or should I say, upthe tree?)For instance, if you have a strongor em or some other child element inside
this italics selector, that strongor emchild inherits the green color of its
ancestor italics selector:Figure 14-7:
A three-
element
contextual
selector,
darken-
ing the
background
of a span
(but only
if it’s within
a strong
within a b).