![[a screen capture of the boxes]](boxes.jpg){kind=link}
&
Using sibling selectors (span + span) ...
Quick brown fox jumps over the lazy dog.
... the size is always relative to default size (in the
<body>).
But by making the elements nest, and
using the parent selector (span > span) ...
Quick brown fox jumps over the lazy dog.
... we get an interesting telescoping effect.
This example has boxes drawn around each span within
a span to show the nesting more clearly:
Quick brown fox jumps over the lazy dog.
Why do we need the CSS rule
span {font-variant: normal}
to cancel the effect of the
p.example > span:first-child {font-variant:small-caps}
on all of the words after the first?
What would happen if we used this CSS rule:
instead of
span:first-child {font-size:550%}
p.example > span:first-child {font-size:550%}?
See
&