Using sibling selectors (span + span) ...

Quick brown fox jumps over the lazy dog.

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.

Quick brown fox jumps over the lazy dog.

Questions

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?
How is the cascading in CSS similar, but not the same as, inheritence in Java?
- Hint: consider your answer to the first question.
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.)

Help with selectors

If you have trouble remembering what the selectors mean then see the following chart and the excellent Selectoracle website.

Some CSS selectors
		Example
Pattern	Means	Selector	Matches

(blank)	ancestor	`p.example span`	`span`s that are between `<p class="example">` and its `</p>`
`>`	parent	`p.example > span`	`span`s that are immediate children of `<p class="example">`
`+`	sibling	`h2 + p`	any `p` that immediately follows a `h2`
`.`	class attribute	`p.example`	any `p` that has `example` as a word in its `class` attribute
`#`	`id` attribute	`span#warning`	only the `span` that includes `id = "warning"` in its attributes
`:first-child`	itself a first child	`span:first-child`	any `span` that is the first child of its parent

See