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>