CSS Tutorial Tip

I wasn’t really clear on what the pound (#) and greater than (>) symbols meant in CSS code. From nemesis1:

Child Combinator

The child combinator is the greater-than symbol or right angle bracket (>).
Using it to combine two simple selectors means that elements matching the second
simple selector should be selected when they are immediate children of an element
matching the first.

Let’s take a look at some examples using the child combinator:

div.sidebar > p

Select any paragraph that is an immediate child of a div with a class
of "sidebar".

This selector would match only the first paragraph in this markup:
<div class="sidebar"> <p>This is a paragraph</p> <div> <p>This
is another paragraph.</p> </div> </div>

#maincontent blockquote > p:first-child:first-line

Select the first line of any paragraph that is the first child of a block
quote, which itself is the descendant of any element with the ID "maincontent".

This selector would match the first line of the first paragraph in this markup:
<div id="maincontent"> <blockquote> <p>This
is a paragraph.</p> <div> <p>This is another
paragraph.</p> </div> </blockquote> </div>