span + span
)
<p class="example"> <span>Quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span> </p>
span {font-variant: normal} p.example > span:first-child {font-size:550%; font-variant:small-caps} span + span {font-size:smaller}
Using sibling selectors (span + span
) ...
Quick brown fox jumps over the lazy dog.
... the size is always relative to the size of the parent element
(in this case the <body>
). If it helps, you can
think of the parent as containing its children (which it does in the
HTML code and in the visual sense which we'll see
soon).