CSS Descendant Selector

Descendant selectors in CSS allow you to target elements that are descendants of another element.

This selector is denoted by a space between two or more selectors.

Here are a few examples of descendant selectors and how they can be used for element manipulation:

Basic Descendant Selector

        
            <div>
   <p>This is a paragraph inside a div.</p>
</div>
        
    

        
            div p {
   color: blue;
}
        
    

In this example, the descendant selector div p targets all <p> elements that are descendants of a <div> element. It sets the text color of those paragraphs to blue.

Multiple Level Descendant Selector

        
            <div>
    <ul>
        <li>This is an item inside a list.</li>
    </ul>
</div>
        
    

        
            div ul li {
  font-weight: bold;
}
        
    

Here, the descendant selector div ul li targets all <li> elements that are descendants of a <ul> element, which itself is a descendant of a <div> element. It sets the font weight of those list items to bold.

Descendant Selector with Class

        
            <div class="container">
    <p>This is a paragraph inside a container.</p>
</div>
        
    

        
            .container p {
     background-color: yellow;
}
        
    

In this example, the descendant selector .container p targets all <p> elements that are descendants of an element with the class "container". It sets the background color of those paragraphs to yellow.