In this example, the top box that uses much structural inheritance is rather complicated. It's a paragraph class wordy, and the diagram below shows the relevant style instructions and where the selectors apply them.
p.wordy { background-color: paleturquoise; padding: 1em; } | |||||||||||
p.wordy span { background-color: lightgreen; font-style: normal; } | |||||||||||
p.wordy > span { font-style: italic; text-decoration: underline; } | |||||||||||
p.wordy span.dingbat span { background-color: khaki; } | |||||||||||
<p class="wordy"> | |||||||||||
This text is just filler. | |||||||||||
<span> | |||||||||||
It has no purpose except to provide | |||||||||||
<span> | |||||||||||
some structure in which to place | |||||||||||
</span> | |||||||||||
</span> | |||||||||||
some selectors, and maybe say a | |||||||||||
<span class="dingbat"> | |||||||||||
bit about the | |||||||||||
<span> | |||||||||||
notion of cascading. | |||||||||||
</span> | |||||||||||
That is all it is for. | |||||||||||
</span> | |||||||||||
</p> |
The diagram shows the effect of the structural selectors. Inheritance is also active. The text-decoration:underline style is applied only to the outer spans, but inherited by the inner ones. Likewise, the font-style:italic is applied only to outer spans and inerited, but it is overridden by the font-style:normal which is applied to all nested spans.