J. Blustein

Web-centric Computing

Some Example Code

Experiments with CSS Selectors

Using sibling selectors (span + span) ...

Quick brown fox jumps over the lazy dog.

... the size is always relative to default size (in the <body>).

[see the sibling code]

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

[see the parent code]

This example has boxes drawn around each span within a span to show the nesting more clearly:

Quick brown fox jumps over the lazy dog.

[a screen capture of the boxes]


  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?
  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%}?

For more examples of selectors


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