Notes On Structural Selection Example

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.