Descendant Selector
To identify more specific HTML elements, you can use descendant selectors, which are a combination of multiple selectors.
Combination of Type Selectors
When you want to target a specific child, or descendant, an element under a specific parent element, you can use a combination of type selectors. For example, if you want to highlight the <span> element only under the <header> element (not under the <section> element), you can combine two selectors or more with a space in between as shown below.
CSS Example
header span{
background-color: lightcoral;
color: white;
}
Combination of Type Selector and Class Selector
A descendant selector can be applied to a class selector as well. When you want to only select a specific class under a specific element, you can combine a type selector and class selector as shown below.
CSS Example
section .primary span{
background-color: lightblue;
color: white;
}
Practice
Objective:
Try descendant selectors
1. Add new code in the body section of the HTML document
- Open the chapter8.html file with VS Code.
- Add the following code before the
</body>tag:
<h2>Descendant Selector</h2>
<header>
<p class="primary">This is test for <span>Type Selector + Type Selector<span></p>
</header>
<section>
<p class="primary">This is test for <span>Type Selector + Class Selector</span></p>
</section>
2. Add new code in the CSS document
- Open the practice.css file with VS Code.
- Add the following code:
header span{
background-color: lightcoral;
color: white;
}
section .primary span{
background-color: lightblue;
color: white;
}
3. Check the result with a browser
- Open chapter8.html with a browser (make sure that both HTML and CSS files are saved).
- You can see that only specific elements are styled.
You can also check the sample result here (Demo Site). In this demo site, the background color may be different as we'll update the background color in the later part of this course.
You can also learn this topic offline. Click 
.
More Topics to Explore
Figma Component Variants and Interactive Components
Chapter 3. HTML Basics
border-color
