J. Blustein

Web-centric Computing

Some Example Code

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

HTML Code

  <p class="example">
   <span >Quick
     <span >brown
       <span >fox
         <span >jumps
           <span >over
             <span >the
               <span >lazy
                 <span >dog.
                 </span>
               </span> 
             </span> 
           </span> 
         </span> 
       </span> 
     </span> 
   </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

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

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/parent.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