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

What it looks like in Netscape 7

Where To Next?

• main example,
• questions in main example, or
• details of other (parent) selector example.

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

Version:

27 November 2003

CS 4173 Prof.:

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

&