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.