Web Teacher

In a recent post, Descendant Selectors in CSS, you saw that a descendant selector takes this form: #content p. That selector would style every p element that was a descendant of a content element. A child selector is similar, except it doesn’t select every descendant, it selects only immediate descendants of an element (or children). The syntax is element > element.

For example, to select only those paragraphs that are immediate descendants of a blockquote element, you can use the child selector blockquote > p.

Suppose your HTML looked like this:

<blockquote>
<p></p>
<p></p>
</blockquote>

The p elements are immediate descendants, or children, of the blockquote. A CSS rule like

blockquote > p {color: red;}

would style every paragraph element in the previous HTML structure.

However, if the structure of your blockquote was this HTML:

<blockquote>
<p></p>
<div>
<p></p>
</div>
</blockquote>

The second paragraph element is not an immediate child of the blockquote. It is the immediate child of a div element. Using the blockquote > p {color: red;} selector, only the first paragraph (the child) would display in red in that HTML structure.

Stumble it!