Descendant Selector

Part of the CSS Mastery section of Coddy's HTML journey — lesson 2 of 43.

The first selector is the descendant selector. We use it when we want to style elements that are inside another element, even if they are deeply nested. For example, there are two paragraphs inside a container.

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

Now, let's use a descendant selector to style all paragraphs inside the div:

.container p {
    color: blue;
}

All paragraphs inside the .container div will turn blue — even the one nested inside the section element.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a CSS rule that selects all list items (<li>) that are descendants of an element with the class "navigation" and changes their text color to purple.

Cheat sheet

The descendant selector styles elements that are inside another element, even if they are deeply nested.

Syntax: Use a space between the parent and descendant selectors:

.container p {
    color: blue;
}

This selects all <p> elements inside any element with class container, regardless of nesting level.

Try it yourself

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.