Seletor filho em CSS

O seletor filho > permite selecionar elementos com base no aninhamento direto um dentro do outro.

Sintaxe

cssseletor1 > seletor2 {
  
}

Exemplo

Vamos direcionar todas as tags b que estão diretamente dentro das tags p e colori-las em vermelho:

html<p>
  texto <b>+</b>
</p>
<p>
  texto <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Exemplo

Vamos direcionar todas as tags b que estão diretamente dentro dos elementos com a classe .block e colori-las em vermelho:

html<p class="block">
  texto <b>+</b>
</p>
<p class="block">
  texto <i><b>-</b></i>
</p>
<p>
  texto <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Exemplo

Vamos direcionar todos os elementos com a classe .elem que estão diretamente dentro dos elementos com a classe .block e colori-los em vermelho:

html<p class="block">
  texto <span class="elem">+</span>
</p>
<p class="block">
  texto <i><span class="elem">-</span></i>
</p>
<p class="block">
  texto <span>-</span>
</p>
<p>
  texto <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

Veja também