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.

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.

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>