Seletor de Descendente

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 2 de 43.

O primeiro seletor é o seletor descendente. Nós o usamos quando queremos estilizar elementos que estão dentro de outro elemento, mesmo que estejam profundamente aninhados. Por exemplo, existem dois parágrafos dentro de um contêiner.

<div class="container">
    <p>Este é um parágrafo dentro de uma div.</p&    <section>
        <p>Este é um parágrafo dentro de uma seção que está dentro de uma div.</p>
    </section>
</div>

Agora, vamos usar um seletor descendente para estilizar todos os parágrafos dentro da div:

.container p {
    color: blue;
}

Todos os parágrafos dentro da div .container ficarão azuis — mesmo aquele aninhado dentro do elemento section.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma regra CSS que selecione todos os itens de lista (<li>) que são descendentes de um elemento com a classe "navigation" e altere a cor do texto para purple.

Folha de consulta

O seletor descendente estiliza elementos que estão dentro de outro elemento, mesmo que estejam profundamente aninhados.

Sintaxe: Use um espaço entre os seletores pai e descendente:

.container p {
    color: blue;
}

Isso seleciona todos os elementos <p> dentro de qualquer elemento com a classe container, independentemente do nível de aninhamento.

Experimente você mesmo

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

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.