Seletor filho em CSS
O seletor filho > permite selecionar
elementos com base no aninhamento direto
um dentro do outro.
Sintaxe
seletor1 > seletor2 {
}
Exemplo
Vamos direcionar todas as tags b
que estão diretamente dentro das tags
p e colori-las em vermelho:
<p>
texto <b>+</b>
</p>
<p>
texto <i><b>-</b></i>
</p>
p > 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:
<p class="block">
texto <b>+</b>
</p>
<p class="block">
texto <i><b>-</b></i>
</p>
<p>
texto <b>-</b>
</p>
.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:
<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>
.block > .elem {
color: red;
}
:
Veja também
-
Seletor descendente,
que permite selecionar um elemento pelo seu ancestral -
Seletor de irmão adjacente,
que permite selecionar um elemento pelo seu vizinho -
Seletor de irmão geral,
que permite selecionar elementos após um determinado -
Seletor universal,
que permite selecionar todos os elementos
