Selector de descendiente

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 2 de 43.

El primer selector es el selector descendiente. Lo usamos cuando queremos aplicar estilos a elementos que están dentro de otro elemento, incluso si están profundamente anidados. Por ejemplo, hay dos párrafos dentro de un contenedor.

<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>

Ahora, usemos un selector descendiente para aplicar estilos a todos los párrafos dentro de div:

.container p {
    color: blue;
}

Todos los párrafos dentro del div .container se volverán azules, incluso el que está anidado dentro del elemento section.

Desafío

Fácil

Crea una regla de CSS que seleccione todos los elementos de lista (<li>) que sean descendientes de un elemento con la clase "navigation" y cambie su color de texto a morado.

Pruébalo tú mismo

<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>