p,i {color: green;}
Therefore, the <strong>here inherits its parent italic element’s green color:
<P>
Here’s a paragraph with <i>italics, but <strong>also some
strong inside</strong>the italics</i>.
To prevent inheritance from happening all the way down an ancestry line, if
it doesn’t suit you, see the section titled “Thwarting Descendant Selectors,”
later in this chapter.
Styling distant descendants .............................................................
The universal selector makes a change to every element. If you want to
turn everything on your page red — all headlines, hyperlinks, paragraphs,
everything — you can use this rule that employs the universal selector (*):
* {color: red;}
But can you use the universal selector with a contextual selector? Aren’t you
the clever kitty! This technique is somewhat confusing, but it can be done. The
effect is to apply styles to elements a certain degree of distance from ances-
tors. For example, if you want only list elements that are great-grandchildren
to be red:
body * * UL {color: red;}
In this next example, only unnumbered list elements that are a grandchild
(or further down such as a great-grandchild) of the body become red:
body * UL {color: red;}
To qualify for this rule, an unnumbered list element must not be a child of
the body element; instead, it must be further removed from the body, such
as being the child of a list item. (The list item itself is the child of the body.)
Only unnumbered list elements that are children of the body are not turned
red: All the rest of the descendent unnumbered list elements do turn red.
If you think all this is usually more complex than useful, you’re an especially
cunning kitty. However, should you ever need to create rules for distantly
descended elements, combining the universal selector with a contextual
selector is the way to go.
262 Part IV: Advanced CSS Techniques
