Selector de descendiente

Parte de la sección CSS Mastery 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 de descendientes para dar estilo a todos los párrafos dentro del 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.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla 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 purple.

Hoja de referencia

El selector de descendientes aplica estilos a los elementos que están dentro de otro elemento, incluso si están profundamente anidados.

Sintaxis: Use un espacio entre los selectores padre y descendiente:

.container p {
    color: blue;
}

Esto selecciona todos los elementos <p> dentro de cualquier elemento con la clase container, independientemente del nivel de anidamiento.

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>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.