CSS Rules and Selectors part 4

• RSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

CSS Rules and Selectors

12

4/4

     

Descendant Selectors

These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to. 

For example, to target only <em> elements in the first paragraph of the "intro" section:

The HTML:<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
The CSS:

#intro .first em {
color: pink;
background-color:gray;
}Try It Yourself

As a result, only the elements selected will be affected:
The descendant selector matches all elements that are descendants of a specified element.