Seletor de descendente

Lição 8 de 15 do curso Seletores CSS da Coddy.

No tópico anterior, aprendemos sobre o combinador de filho (child combinator), que visa os filhos diretos de um elemento. Agora, vamos explorar os seletores de descendentes, que são denotados por um espaço em branco. Um seletor de descendente permite que você atinja elementos que estão aninhados dentro de outro elemento em qualquer nível, não apenas filhos diretos.

Sintaxe

selector1 selector2 {
  /* property declarations */
}

Por exemplo,

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

A regra CSS acima estilizará ambos os parágrafos em vermelho e com um tamanho de fonte de 2em.

Como ele se relaciona com os seletores de filho?

Um seletor de descendente é mais geral do que um seletor de filho. Isso significa que um seletor de descendente corresponderá a todos os elementos que são descendentes de um elemento especificado, enquanto um seletor de filho corresponderá apenas aos elementos que são descendentes diretos de um elemento especificado.

Por exemplo, o seletor div p corresponderá a todos os elementos p que são descendentes de um elemento div, incluindo elementos p que estão aninhados dentro de outros elementos p. O seletor div > p corresponderá apenas a elementos p que são descendentes diretos de um elemento div.

Desafio

Fácil

Com base no exercício anterior, vamos usar a mesma estrutura HTML. Escreva uma regra CSS usando o seletor descendente para estilizar todos os parágrafos dentro do elemento .list, independentemente do nível de aninhamento. Dê a eles uma nova cor, tamanho e fonte como achar melhor

Experimente você mesmo

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributo Presença e valores exatos Seletores de valor de atributo Seletores de valor de atributo II Seletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classe Seletores de ID Seletores universais

3Seletores Combinadores

Seletor de filhoSeletor de descendenteSeletor de irmão adjacente Seletor de irmão geral