Seletor Contextual em CSS
O seletor contextual, representado pelo
comando espaço (' '), permite selecionar
tags aninhadas em um elemento pai especificado
Sintaxe
seletor1 seletor2 {
}
Exemplo
Vamos direcionar todas as tags p
dentro das tags div e colori-las de vermelho:
<div>
<p>
texto
</p>
<p>
texto
</p>
</div>
div p {
color: red;
}
:
Exemplo
Vamos direcionar todas as tags p
dentro do elemento com #elem e colori-las
de vermelho:
<div id="elem">
<p>
texto
</p>
<p>
texto
</p>
</div>
#elem p {
color: red;
}
:
Exemplo
Vamos direcionar todas as tags p
dentro dos elementos com a classe .block
e colori-las de vermelho:
<div class="block">
<p>
texto
</p>
<p>
texto
</p>
</div>
.block p {
color: red;
}
:
Exemplo
Vamos direcionar todas as tags b
dentro das tags p, que estão dentro
das tags div e colori-las de vermelho:
<div>
<p>
texto <b>+</b>
</p>
</div>
div p b {
color: red;
}
:
Veja também
-
Seletor Filho,
que permite selecionar elementos por aninhamento direto -
Seletor Irmão Adjacente,
que permite selecionar um elemento pelo seu vizinho -
Seletor Irmão Geral,
que permite selecionar elementos após um determinado -
Seletor Universal,
que permite selecionar todos os elementos
