Seletor de filho

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

Um seletor de filho (child selector) é um tipo de seletor CSS que seleciona todos os elementos que são filhos diretos de um elemento especificado. O seletor de filho é denotado por um sinal de maior que (>) entre dois seletores.

Exemplo:

Considere a seguinte estrutura HTML:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Para atingir o parágrafo que é filho direto, você usaria o combinador de filho da seguinte forma:

.parent > p {
    color: blue;
}

Neste exemplo, apenas o parágrafo que é filho direto ficará azul, não aquele aninhado dentro da <div> interna.

Seletores de filho também podem ser usados para evitar a estilização de elementos que não são filhos diretos de um elemento especificado. Por exemplo, você poderia usar um seletor de filho para estilizar todos os links que são filhos diretos de um elemento p para que fiquem vermelhos.

Desafio

Fácil

Dada a seguinte estrutura HTML, crie uma regra CSS usando o combinador de filho para estilizar os itens de lista diretos dentro do elemento <ul> para ter uma cor de fundo "yellow".

Experimente você mesmo

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</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 descendente Seletor de irmão adjacente Seletor de irmão geral