To identify more specific HTML elements, you can use descendant selectors, which are a combination of multiple 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.
header span{
background-color: lightcoral;
color: white;
}
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.
section .primary span{
background-color: lightblue;
color: white;
}
</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>
header span{
background-color: lightcoral;
color: white;
}
section .primary span{
background-color: lightblue;
color: white;
}
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.
To identify more specific HTML elements, you can use descendant selectors, which are a combination of multiple 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.
header span{
background-color: lightcoral;
color: white;
}
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.
section .primary span{
background-color: lightblue;
color: white;
}
</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>
header span{
background-color: lightcoral;
color: white;
}
section .primary span{
background-color: lightblue;
color: white;
}
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.