HTML and CSS Reference
In-Depth Information
This selector matches paragraphs that follow
<div>
elements.
<div>Not red</div>
<p>Red</p>
<p>Not red</p>
Descendent selector
The descendent selector matches an element if it is the child or grandchild of another
element. It is useful when you want to apply a style to an element only when it resides
within another element.
div p { background: gray; }
The preceding rule applies to the following paragraph because it descends from a
<div>
element:
<div>
<p>Gray</p>
</div>
Direct child selector
The direct child selector matches its second element if it is the immediate descendant of
its first element.
div > span { color: green; }
When applied to the following markup, this rule will color the second
<span>
element green. The first
<span>
element is not colored because it is not a direct child of
<div>
.
<div>
<p>
<span>Not green</span>
</p>
<span>Green</span>
</div>
