Seletor de descendentes e classes em CSS
Suponha que temos o seguinte código:
<div class="block">
<h2>Título</h2>
<p>
texto
</p>
</div>
<div class="block">
<h2>Título</h2>
<p>
texto
</p>
</div>
Vamos selecionar todos os títulos h2 e
parágrafos que estão dentro do elemento com a classe
block e colori-los em cores diferentes.
Vamos usar o seletor de descendentes (que é o
espaço entre os seletores) para isso:
.block h2 {
color: red;
}
.block p {
color: green;
}
É dado o seguinte código:
<p class="eee">
texto <i>itálico</i>
</p>
<p class="eee">
texto <i>itálico</i>
</p>
<div class="eee">
texto <i>itálico</i>
</div>
<div class="eee">
texto <i>itálico</i>
</div>
Colora em vermelho todas as tags i
que estão dentro dos elementos com a classe eee.