CSS Descendant Selector

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 of the selectors are used to specify the relationship between two elements, which are called CSS combinators. The descendant selector is one of the CSS combinators. We will understand the descendant selector in this article, but let us first understand the CSS combinator.

CSS Combinator

A combinator is utilized to depict the relationship between two selectors.

For instance, if you want to reach a place called "Shastri Nagar" and you type "Shastri Nagar" on the map then it will demonstrate a list of various places with identical names. When the next time you specify the name of the city and type "Shastri Nagar, Ghaziabad" then you will find the exact location where you want to reach.

In such a way, CSS combinators help to locate and select a specific element by specifying the relationship between two selectors. The CSS combinator combines two selectors and forms a single selector. It is essential to remember that the elements must satisfy the relationship between two selectors.

Syntax:

selector1 (combinator) selector2 {
	CSS property1;
	CSS property2;
	...
}

The "selector1" and "selector2" are the selectors in the above-provided syntax. The sign of the combinator comes in place of the "combinator" and the CSS properties are declared under the curly braces.

Descendant Selector

The CSS descendant selector is utilized to match the descendant elements of a particular element. The word Descendant indicates nested anywhere in the DOM tree. It can be a direct child or deeper than five levels, but it will still be referred to as a descendant.

The Descendant combinator is represented by utilizing a single space. It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector. Descendant selectors use the descendant combinators.

Syntax

selector1 selector2 {  
  /* property declarations */  
}  

The "selector1" and "selector2" are the selectors in the above-given syntax. The descendant selector is a single space between two selectors. The CSS properties are declared inside the curly braces.

Demonstrations of the CSS Descendant Selector

The demonstrations will help us comprehend the CSS descendant selector properly. Let's see how it is implemented.

Demonstration 1:

We will put the style to the HTML elements in this demonstration with the help of the CSS descendant selector. We will give style to <p> elements by utilizing the CSS descendant selector.

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 output where we can witness that the different border styles have been put 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 Sharma</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 Singh</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 output, we can witness that the different text colors have been put to both the " List 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 output where we can witness that the style has been applied utilizing the descendant selector on the <label> element, which is the child of <div> element.

We can witness that the style has been applied to the input[type="text"], input[type="date"], and input[type="submit"] utilizing 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 comprehended the CSS descendant selector in this article. The descendant selector defines the relationship between two elements. It is utilized to select the descendant element and apply style to it.

Next TopicCSS calc()

← prev next →