What is Descendant Selector in CSS ?

Last Updated : 31 May, 2023

In this article, we will see the descendant selector, provided by CSS, along with understanding its implementation through examples.

A CSS Selectors are used to select HTML elements based on their element name, id, attributes, etc, which facilitates to select more than one element simultaneously. Descendant Selector is one of the type of Combinators in CSS where the combinators combine 2 selectors in such a way that if an ancestor element matches with the first selector then the elements are matched by the second selector will be selected & these selectors use the descendant Combinator are Descendant Selectors. In simple words, the Descendant Selectors can be any selector having the white-space in between the elements without using any combinators. Descendant is a manner to nested anywhere within the DOM tree. This selector is used to select all the child elements of the specified tag.

Syntax:

first_selector second_selector {
     css properties: values;
}

The first simple selector (first_selector) represents the ancestor element or parent element, and the second simple selector (second_selector) represents the descendant element. We use white space between these two to represent the descendant selector.

The descendant selectors are the most expensive selector in CSS, which means it’s pretty hard or slow for rendering whole engines to find out and do stuff with.

Example 1: The below example demonstrates the implementation of the descendant selector. CSS properties are applied on all p tag elements that are direct or nested descendants of ancestor selector main-div class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        /*CSS properties applied on all  
        direct or nested 'p' elements */ 
        .main-div p { 
            background-color: rgb(188, 238, 189); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h2>Descendant Selector</h2> 
  
    <!-- Outer Para -->
    <p>GFG First Paragraph</p> 
  
    <!-- Outer Div with class 'main-div' Starts -->
    <div class="main-div"> 
        <p>GFG Second Paragraph</p> 
        <p>GFG Third Paragraph</p> 
        <p>GFG Fourth Paragraph</p> 
  
        <!-- Inner nested Div with class  
            'sub-div' starts  -->
        <div class="sub-div"> 
            <p>GFG Fifth Paragraph</p> 
        </div> 
        <!-- Inner nested div ends -->
    </div> 
    <!-- Outer Div ends -->
  
    <!-- Outer Para -->
    <p>GFG Sixth Paragraph</p> 
</body> 
  
</html>

Output:

Example 2: The following is another example of a descendant selector, where CSS properties are applied only to the ‘p‘ tag elements which are direct or nested descendants of only ‘h1‘ tag elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        /* CSS properties are applied on all direct  
             or nested 'p' elements of all 'h2' */ 
        h2 p { 
            background-color: rgb(5, 60, 6); 
            font-family: cursive; 
            color: whitesmoke; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <strong>Descendant selector</strong> 
  
    <!-- first h2 elements -->
    <h2> 
        This is h2 element 
        <p>This is paragraph of h2 element</p> 
    </h2> 
  
    <!-- Outer para elements  -->
    <p>This is outer paragraph</p> 
  
    <!-- second h2 elements -->
    <h2> 
        This is another h2 element 
        <p> 
            This is another paragraph  
            of second h2 element 
        </p> 
    </h2> 
  
    <!-- h3 elements  -->
    <h3> 
        This is h3 element 
        <p>This is paragraph of h3 element</p> 
    </h3> 
</body> 
  
</html>