J. Blustein

Web-centric Computing

Some Example Code

Inheritance and Cascading in CSS

HTML Code

(Nested spans)

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

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

Looks like this...

With these CSS Rules

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

The same HTML looks like this...

Does that mean that the first rule over-rides the later ones?

Questions

1. 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?

2. How is the cascading in CSS similar, but not the same as, inheritence in Java?
   • Hint: consider your answer to the first question.

3. What would happen if we used this CSS rule:

   span:first-child {font-size:550%}

   instead of

   p.example > span:first-child {font-size:550%}?

   • (Computer science is an experimental science -- try it and see what happens.)

For more examples of selectors

See

• the Selectorial - CSS selectors at the fabulous Max Design website, and
• the pattern matching section of the CSS2 standard.

http://www.cs.dal.ca/~jamie/course/CS/3172/examples/CSS/nesting/nesting.html

Version:

30 October 2007

CS 3172 Prof.:

J. Blustein <jamie@cs.dal.ca>

&