CSS selectors are utilized to select the HTML elements, which helps in applying styles to the elements. Many selectors in CSS help in selecting the HTML elements .
Some selectors are employed to define the connection between two elements, known as CSS combinators. Among these CSS combinators is the descendant selector. This post will delve into the descendant selector, but before that, let's grasp the concept of the CSS combinator.
CSS Combinator
A combinator is employed to illustrate the connection between two selectors.
For example, if you are trying to locate a destination named "Shastri Nagar" and you input "Shastri Nagar" on the map, it will display a list of multiple locations with the same name. However, when you include the city name next time and type "Shastri Nagar, Ghaziabad," you will pinpoint the precise destination you are looking for.
In this manner, CSS combinators aid in identifying and choosing a particular element by defining the connection between two selectors. The CSS combinator merges two selectors to create a unified selector. It is crucial to note that the elements need to meet the criteria set by the relationship between the two selectors.
Syntax:
selector1 (combinator) selector2 {
CSS property1;
CSS property2;
...
}
The "selector1" and "selector2" serve as the selectors within the syntax given above. The combinator symbol replaces the "combinator" and the CSS properties are specified within the curly braces.
Descendant Selector
The CSS descendant selector is employed to select elements that are descendants of a specific element. The term "descendant" implies elements nested at any level within the DOM tree. They could be direct children or located deeper than five levels, yet they are still considered descendants.
The Descendant combinator is denoted by using a single space character. It merges two selectors where the initial selector signifies an ancestor (such as a parent or grandparent), and the following selector signifies descendants. Elements that match the second selector are chosen if they have an ancestor element that matches the first selector. Descendant selectors make use of the descendant combinators.
Syntax
selector1 selector2 {
/* property declarations */
}
The "selector1" and "selector2" function as the selectors within the provided syntax. A descendant selector is indicated by a single space that separates two selectors. The CSS properties are specified within the curly braces.
Demonstrations of the CSS Descendant Selector
The demonstrations will aid us in understanding the CSS descendant selector effectively. Let's observe its practical implementation.
Demonstration 1:
We will apply styling to the HTML components in this tutorial using the CSS descendant selector. The CSS descendant selector will be employed to add styles to <p> elements.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: lightblue;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> This is 1st paragraph in the div. </p>
<p> This is 2nd paragraph in the div. </p>
<div>
This is second div in the first div
<p> This is the paragraph in second div. It will also be affected. </p>
</div>
</div>
<p> Paragraph 4. It will not be affected because it is not in the div. </p>
</body>
</html>
Output:
We can witness in the result below that the first paragraph, second paragraph, and third paragraph have been styled as these three <p> elements are the descendant element of the parent element "<div>" . The fourth paragraph has no effect because it is not a child of the <div> element.
Demonstration 2:
- We will construct tables in this demonstration and apply style to the tables utilizing the descendant selector.
- We will define the relationship between the class selector ".employee-table" and element selector "th" utilizing the descendant selector (space) between the selectors and putting border style on the <th> elements of "Employee table" .
- We will specify the relationship between the class selector ".product-table" and element selector "th" utilizing the descendant selector (space) between the selectors and apply the border style on the <th> elements of "Product table" .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing two tables and applying style on them utilizing the descendant selector</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background: burlywood;
}
.employee-table {
border: 2px solid brown;
}
.product-table {
border: 2px solid purple;
}
.employee-table th {
border: 2px dotted red;
}
.product-table th {
border: 2px dotted purple;
}
</style>
</head>
<body>
<h1>Applying style on tables utilizing the descendant selector</h1>
<div>
<caption>
Employee Table
</caption>
<table class="employee-table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Address</th>
<th>Salary</th>
</tr>
<tr>
<td>501</td>
<td>Abhishek</td>
<td>Finance</td>
<td>Mumbai</td>
<td>45,000</td>
</tr>
<tr>
<td>502</td>
<td>Ankita</td>
<td>Marketing</td>
<td>Mumbai</td>
<td>60,000</td>
</tr>
<tr>
<td>503</td>
<td>Isha</td>
<td>Finance</td>
<td>Ghaziabad</td>
<td>50,000</td>
</tr>
<tr>
<td>504</td>
<td>Aishwarya</td>
<td>Finance</td>
<td>Noida</td>
<td>75,000</td>
</tr>
</table>
</div> <br>
<caption>
Product Table
</caption>
<table class="product-table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>201</td>
<td>Laptop</td>
<td>Dell</td>
<td>2</td>
<td>60,000</td>
</tr>
<tr>
<td>202</td>
<td>Refrigerator</td>
<td>Godrej</td>
<td>1</td>
<td>75,000</td>
</tr>
<tr>
<td>203</td>
<td>Oven</td>
<td>LG</td>
<td>5</td>
<td>20,000</td>
</tr>
<tr>
<td>204</td>
<td>Washing Machine</td>
<td>LG</td>
<td>2</td>
<td>55,000</td>
</tr>
</table>
</body>
</html>
Output:
Here is the result showing various border styles applied to the "Employee table" and "Product table".
Demonstration 3:
- We will create two lists in this demonstration and style them with the help of the descendant selector.
- We will utilize the descendant selector (space) between the class selector ".batsmen" and element selector "li" to select a specific list which is "List of Indian Cricket Batsmen" and give a hotpink color to the text written inside the <li> tags.
- We will also utilize the descendant selector (space) between the class selector "bowlers" and element selector "li" to select a specific list, which is "List of Indian Cricket Bowlers" and give an olive color to the <li> element .
- We will utilize the descendant selector (space) between two element selectors, i.e., div and h3 , which selects the specific <h3> element .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing two lists and applying style on them utilizing the descendant selector</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background: white;
}
.batsmen h3 {
color: red;
}
.batsmen li {
color: hotpink;
}
.bowlers li {
color: olive;
}
</style>
</head>
<body>
<h1>Applying style on the lists utilizing the descendant selector</h1>
<div class="batsmen">
<h3>List of Indian Cricket Batsmen</h3>
<ul>
<li>Sachin Tendulkar</li>
<li>Virendra Sehwag</li>
<li>MS Dhoni</li>
<li>Kapil Dev</li>
<li>Irfan Pathan</li>
<li>Virat Kohli</li>
<li>Gautam Gambhir</li>
<li>Anil Kumble</li>
<li>Shikar Dhawan</li>
<li>Rohit Abdul</li>
</ul>
</div>
<div class="bowlers">
<h3>List of Indian Cricket Bowlers</h3>
<ul>
<li>Ravindra Jadeja</li>
<li>Irfan Pathan</li>
<li>Ashish Nehra</li>
<li>Arshdeep Abdul</li>
<li>Jaspreet Bumrah</li>
<li>Hardik Pandya</li>
<li>Ravichandran Ashwin</li>
<li>Shahbaz Ahmed</li>
<li>Shardul Thakur</li>
<li>Umesh Yadav</li>
</ul>
</div>
</body>
</html>
Output:
Here, in the result, we can observe that distinct text hues have been applied to both the "Catalog of Indian Cricket Batsmen" and "List of Indian Cricket Bowlers".
We can witness that the "red" text color has been applied on <h3> element which is written inside the <div> element whose class attribute value is "batsmen" but the style has not been applied on the other <h3> element because we have specifically selected the <h3> element which is the child of <div class=".batsmen"> element utilizing the descendant selector.
Demonstration 4:
- We will create a form in this demo and put the style to the form utilizing the descendant selector.
- We will make the utilization of the descendant selector (space) between the two element selectors, i.e., "div" and "label" that selects all the <label> elements that come inside an <div> element and provide style to the <label> elements.
- We will make the utilization of the descendant selector (space) between the two selectors, i.e., "div" and "input[type="text"]" that selects all the "input[type="text"]" that comes inside an <div> element and provide style.
- We will utilize the descendant selector (space) between the two selectors, i.e., "div" and "input[type="date"]" that selects a specific element that comes inside an <div> element and provides style.
- We will utilize the descendant selector (space) between the two selectors, i.e., "div" and "input[type="submit"]" that selects a specific element that comes inside an <div> element and provides style.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing a form and applying style on the form utilizing the descendant selector</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background: white;
}
div label {
font-weight: bold;
color: rebeccapurple;
}
div input[type="text"] {
width: 250px;
padding: 5px;
border: 2px solid fuchsia;
}
div input[type="date"] {
width: 250px;
padding: 5px;
border: 2px solid fuchsia;
}
div input[type="submit"] {
width: 75px;
height: 35px;
border-radius: 10px;
padding: 2px;
border: 2px solid red;
background-color: pink;
color: darkred;
}
</style>
</head>
<body>
<h1>Applying style on the form utilizing the descendant selector</h1>
<h3>Student Registration Form</h3>
<div>
<form>
<label for="first-name">First Name:</label> <br> <br>
<input type="text" id="first-name" name="first-name" placeholder="Type your first name"> <br> <br>
<label for="second-name">Last Name:</label> <br> <br>
<input type="text" id="last-name" name="last-name" placeholder="Type your last name"> <br> <br>
<label for="dob">Date of Birth:</label> <br> <br>
<input type="date" id="dob" name="dob"> <br> <br>
<label for="course">Course Name:</label> <br> <br>
<input type="text" id="course" name="course"> <br> <br>
<input type="submit" name="" id="submit" value="Submit">
</form>
</div>
</body>
</html>
Output:
Here is the result demonstrating the application of the style using the descendant selector on the specified element, which is a child of another specified element.
We can observe that the style has been implemented on the input[type="text"], input[type="date"], and input[type="submit"] elements using the CSS descendant selector.
Browser Support
Following are the browsers that support the CSS descendant selector:
- Google Chrome
- Opera
- Microsoft Edge
- Safari
- Firefox
Conclusion
We have explored the CSS descendant selector in this guide. This selector establishes the connection between two elements, allowing the styling to be applied to the descendant element.