J. Blustein

Web-centric Computing

Some Example Code

Experiments with CSS Selectors
#2 Nested elements and parent selectors (span > span)


  <p class="example">
   <span >Quick
     <span >brown
       <span >fox
         <span >jumps
           <span >over
             <span >the
               <span >lazy
                 <span >dog.

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

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.

What it looks like in Netscape 7

large QUICK (in small caps), every other word is smaller and not in small caps

Where To Next?

27 November 2003
CS 4173 Prof.:
J. Blustein <jamie@cs.dal.ca>

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