CSS Descendant Selector
The descendant selector in CSS allows you to select an element that is a descendant of another specified element. A descendant element is an element that is nested inside another specified element, not exactly a direct child element.
In other words, an element that is completely contained within another element’s content is called descendant element. It can be a child, grandchild, great grandchild, and so on, of another element.
Descendant selectors target and apply CSS style rules to elements that are nested within another specified element. For example, div p { color: red; } will apply to all <p> elements in a <div> element.
Syntax to Define Descendant Selector in CSS
To create a descendant selector, simply write the parent element, followed by a space, and then the child element. The general syntax to define descendant selector in CSS is as follows:
ancestor descendant {
/* CSS properties: values */
}In the above syntax, an ancestor represents the parent or ancestor element in which the descendant element is nested. The descendant represents the child or descendant element that you want to apply styles to.
For example, if you want to style all <p> elements that are inside a <div>, you would write the code like this:
div p {
color: red;
}
In this example code, the div is a parent element and p is a child element. All <p> elements that are descendants of a <div> element will be colored red.
Basic Examples on CSS Descendant Selector
Let’s take some examples to understand how the descendant selector works.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Styling Nested Paragraphs using CSS Descendant Selector</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Since this paragraph is inside a div element, it will be styled with the CSS rules.</p>
</div>
<p>Since this paragraph is not inside a div element, it will not be styled with the CSS rules.</p>
</body>
</html>
In this example, we have defined one <p> element inside a div element and another <p> element outside the div element. The <p> element which is inside the div element is a descendant of the div element. Therefore, div p { color: red; } will apply the style on this <p> element and change the text color from black to red.
But this will not happen with another <p> element which is outside the div element because this <p> element is not a descendant of the div element. The CSS rule will target all <p> elements that are descendants of the <div> element.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.container p {
color: red;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph element is inside a div element.</p>
<span>This span element is inside the same div element.</span>
<div class="inner-container">
<p>This paragraph element is inside a nested div element.</p>
</div>
</div>
<p>This paragraph element is outside the div element.</p>
</body>
</html>
Output:
In this example, we have three <p> elements, one <span> element, and two <div> elements. The first <p> element is inside the first <div> element. While the second <p> element is inside the nested <div> element. The third <p> element is outside the div element.
The descendant selector is .container p which will only apply CSS styles to the paragraph elements that are inside the <div class=”container”>. Thus, the first and second <p> elements are descendant of the div element. Therefore, the text color of these <p> elements will be red color.
The third <p> element is outside the div element. Therefore, it will not be styled. If you notice that the span element is also not styled because the CSS rule specifically targets paragraphs (<p>) inside the div element, not spans (<span>).
The descendant selector used in the CSS rule is .container p, which means it only applies to <p> elements that are descendants of the div element with the class container.
If you want to style the span in addition to the paragraph elements, you need to include a separate rule for the span like this:
.container p {
color: blue;
}
.container span {
color: green;
}Now, both the paragraphs and the span inside the div element will be styled according to the specified rules.
Example of Targeting Nested List Items
Let’s take an example in which we will target list items using descendant selector.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>
Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</body>
</html>
Output:
In this example, the descendant selector ul li will apply the CSS rule to all list items <li> inside the <ul> element because all the <li> elements are descendants of a <ul> element.
Let’s take another example in which we will target the nested list items inside the <ul> element using CSS descendant selector approach.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
ul ul li {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>
Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</body>
</html>
In this example, the descendant selector ul ul li will only apply the CSS rule to the nested list items (<ul> ul li).
Combining CSS Descendant Selector with Other Selectors
CSS allows you to combine descendant selector with other types of selectors to create more specific and powerful rules.
Combining with Class Selector
If you combine the descendant selector with the class selector, it will target the elements based on their class attributes as well as also targeting their nesting within other elements.
The general syntax for combining the descendant selector with a class selector is as follows:
.parent-classname .descendant-classname {
/* CSS properties */
}In this syntax, the .parent-classname is a parent class selector which selects elements with the specified class attribute value “parent-classname”.
The .descendant-classname is a descendant class selector of the parent class selector that will select elements with the specified class attribute value “.descendant-classname”.
Example 5:
<!DOCTYPE html>
<html>
<head>
<style>
.container .text {
color: green;
}
</style>
</head>
<body>
<div class="container">
<p class="text">This is a paragraph element with class attribute value 'text' inside a div element with class attribute value 'container'.</p>
<span class="text">This is a span element with class attribute value 'text' inside a div element with class attribute value 'container'.</span>
</div>
<div class="other-container">
<p class="text">This is a paragraph element with class attribute value 'text' inside a div element with class attribute value'other-container'.</p>
</div>
<p class="text">This is a paragraph element with class attribute value 'text' outside the container.</p>
</body>
</html>
Output:
In this example, we have combined the CSS descendant selector with the class selector. This selector .container .text will target the <p> and <span> elements with class attribute value ‘text’ that is a descendant of the div element with class attribute value ‘container’. The CSS rule will change the text color of the targeted elements to green.
However, the <p> element with the class attribute value ‘text’ inside the div with the class attribute value ‘other-container’ will not be affected. In addition to it, the <p> element with the class attribute value ‘text’ outside the container will also not be affected. As a result, only the first paragraph and the span inside the div with the class container will be styled.
Combining with Attribute Selector
If you combine the descendant selector with attribute selectors, it will allow you to target elements based on their attributes, while also targeting their nesting within other elements. This combination provides a powerful way to apply CSS styles to elements that meet specific criteria.
The general syntax for combining descendant selector with attribute selectors in CSS is as follows:
ancestor-selector descendant-selector[attribute-name="attribute-value"] {
/* CSS properties */
}
In the above syntax, the ancestor selector targets the higher-level element. The descendant selector targets the nested elements. The attribute selector further selects the element based on the specific attribute value.
Example 6:
<!DOCTYPE html>
<html>
<head>
<style>
form .form-group input[type="text"] {
border: 1px solid blue;
}
form .form-group input[type="email"] {
border: 1px solid green;
}
form .form-group input[type="password"] {
border: 1px solid red;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password">
</div>
</form>
</body>
</html>
In this example, the ancestor selector is <form> element, while the descendant selector is a div element with class attribute value ‘form-group’. The attribute selector is input[type=”text”], input[type=”email”], and input[type=”password”].
The selector form .form-group input[type=”text”] will target the <input> element with the attribute type=”text” that is a descendant of a div element with the class attribute value ‘form-group’, which in turn is a descendant of a <form> element. The CSS rule will change the border of the targeted element to 1px solid blue.
Similarly, the selector form .form-group input[type=”email”] will target the <input> element with the attribute type=”email” and set its border to 1px solid green.
Combining with ID Selector
You can combine the descendant selector with id selector to target elements based on their unique ID attributes, while also targeting their nesting within other elements. The general syntax for combining descendant selectors with ID selectors in CSS is as follows:
ancestor-selector #id-selector {
/* CSS properties */
}
Example 7:
<!DOCTYPE html>
<html>
<head>
<style>
.container #highlight {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<p id="highlight">This paragraph with a specific ID is inside a div element.</p>
</div>
<p id="highlight">This paragraph with the same ID is outside the div element.</p>
</body>
</html>
In this example, we have combined the CSS descendant selector with an id selector that will target the element with the ID highlight that is a descendant of an element with the class container. This selector will only apply the CSS rule for the paragraph inside the .container with the ID highlight. The paragraph with the same ID outside the .container will not be affected.
Combining with Pseudo-Classes
If you combine the descendant selector with pseudo-class in CSS, it will allow you to target elements based on their nesting as well as their state or position within the document. The general syntax for combining descendant selector with pseudo-classes in CSS is as follows:
ancestor-selector descendant-selector:pseudo-class {
/* CSS properties */
}
Example 8:
<!DOCTYPE html>
<html>
<head>
<style>
.menu li:hover a {
color: red;
}
.menu li:first-child a {
font-weight: bold;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
In this example, the combined selector .menu li:hover a will target <a> elements that are descendants of <li> elements within a <ul> element with the class menu when the <li> element is hovered over. The text color of these <a> elements changes to red.
Similarly, the combined selector .menu li:first-child targets <a> elements that are descendants of the first <li> element within a <ul> element with the class menu. The font weight of these <a> elements is set to bold.
You can also combine descendant selector with other selectors such as pseudo-element, and element selector in the CSS. Try to combine them yourself. I hope that you will have understood the basic syntax of the descendant selector with various other types of selectors in the CSS.
