J. Blustein

Web-centric Computing

Some Example Code

Experiments with CSS Selectors
#1 Using sibling selectors (span + span)

HTML Code

  <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>

CSS Code

  span         {font-variant: normal}
  p.example > span:first-child
               {font-size:550%; font-variant:small-caps}
  span + span  {font-size:smaller}

What it looks like in this browser

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).

What it looks like in Netscape 7

large QUICK (in small caps), normal-size for the rest

How the selectors apply

hierarchy chart of the above HTML

Where To Next?


http://www.cs.dal.ca/~jamie/course/CS/3172/examples/CSS/nesting/sibling.html
Version:
01 November 2007
CS 3172 Prof.:
J. Blustein <jamie@cs.dal.ca>

This document is written in valid XHTML 1.0 &
This document makes use of cascading style sheets