Seletor de Descendente do CSS

Seletor de descendentes (descendant selector) também conhecido como seletor de inclusão.

O seletor de descendente pode selecionar elementos que são descendentes de um elemento específico.

Selecionar elementos com base no contexto

Podemos definir regras de seletor de descendente para que essas regras funcionem em certas estruturas de documentos, mas não em outras.

Por exemplo, se quiser aplicar estilos apenas aos em dentro do elemento h1, pode-se escrever assim:

h1 em {color:red;}

A regra acima mudará o texto do em que é descendente do elemento h1 para vermelho. Outros textos em (como parágrafos ou citações) não serão selecionados por essa regra:

<h1>Este é um <em>importante</em> título</h1>
<p>Este é um parágrafo <em>importante</em>.</p>

Experimente Você Mesmo

Claro, também pode-se adicionar uma classe ao em em cada h1, mas obviamente, o seletor de descendente é mais eficiente.

Explicação gramatical

No seletor de descendente, o lado esquerdo da regra inclui dois ou mais seletores separados por espaços. O espaço entre os seletores é um operador de combinação. Cada operador de combinação pode ser interpretado como '... encontrado em...', '... parte de...', '... descendente de...', mas é necessário ler o seletor da direita para a esquerda.

Portanto, o seletor h1 em pode ser interpretado como 'qualquer em que seja descendente do elemento h1'. Se quiser ler o seletor da esquerda para a direita, pode-se dizer da seguinte forma: 'Todos os h1 que contêm em aplicarão o seguinte estilo ao em'.

Aplicações específicas

O seletor de descendente é extremamente poderoso. Com ele, é possível tornar possível tarefas que não podem ser realizadas no HTML.

Suponha que haja um documento que contenha uma barra lateral e uma área principal. A barra lateral tem um fundo azul, enquanto a área principal tem um fundo branco. Ambas as áreas contêm listas de links. Não pode-se definir todos os links como azuis, pois dessa forma, os links azuis na barra lateral não seriam visíveis.

A solução é usar o seletor de descendente. Neste caso, pode-se atribuir a classe 'sidebar' ao div que contém a barra lateral e a classe 'maincontent' ao conteúdo principal. Em seguida, escreva os seguintes estilos:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Há um aspecto fácil de ignorar sobre o seletor de descendente, que é que a distância entre dois elementos pode ser infinita.

Por exemplo, se escrito ul em, essa sintaxe escolherá todos os elementos em herdados do elemento ul, independentemente do nível de nesting do em.

Portanto, o ul em escolherá todos os elementos em dentro dos seguintes marcadores:

<ul>
  <li>Item da Lista 1</li>
    <ol>
      <li>Item da Lista 1-1</li>
      <li>Item da Lista 1-2</li>
      <li>Item da Lista 1-3</li>
        <ol>
          <li>Item da Lista 1-3-1</li>
          <li>Item da Lista</li> <em>1-3-2</em></li>
          <li>Item da Lista 1-3-3</li>
        </ol>
      </li>
      <li>Item da Lista 1-4</li>
    </ol>
  </li>
  <li>Item da Lista 2</li>
  <li>Item da Lista 3</li>
</ul>

Experimente Você Mesmo