Seletor de descendentes em CSS
Suponha que temos uma lista ul e uma lista
ol:
<ul>
<li>texto</li>
<li>texto</li>
<li>texto</li>
<li>texto</li>
<li>texto</li>
</ul>
<ol>
<li>texto</li>
<li>texto</li>
<li>texto</li>
<li>texto</li>
<li>texto</li>
</ol>
Vamos colorir as tags li nessas listas
em vermelho:
li {
color: red;
}
Agora, suponha que queremos colorir as tags li
da lista ul em vermelho, e as tags li
da lista ol - em verde.
Neste caso, o seletor de descendentes nos ajudará.
Ele permite selecionar tags pelo seu elemento pai.
Para isso, é necessário especificar o seletor do pai,
e, após um espaço, o seletor do descendente. No nosso
caso, o seletor ul li selecionará todas
as tags li da lista ul, e o seletor
ol li - selecionará todas as tags li
da lista ol. Vamos colori-las
nas cores desejadas:
ul li {
color: red;
}
ol li {
color: green;
}
O seletor de descendentes não precisa necessariamente consistir
em dois seletores de tag - pode haver
qualquer quantidade deles, escritos com espaços.
No código a seguir, por exemplo, são selecionadas todas
as tags i que estão dentro de uma tag li,
que por sua vez estão dentro de uma tag
ul:
ul li i {
color: red;
}
Dado o seguinte código:
<ul>
<li>texto <i>itálico</i></li>
<li>texto <i>itálico</i></li>
<li>texto <i>itálico</i></li>
<li>texto <i>itálico</i></li>
</ul>
<p>
texto do parágrafo <i>itálico</i>
</p>
<p>
texto do parágrafo <i>itálico</i>
</p>
Pinte de vermelho o itálico das tags
ul, e de verde - o itálico das tags
p.
Dado o seguinte código:
<p>
texto do parágrafo <b><i>negrito itálico</i></b>
</p>
<p>
texto do parágrafo <i>itálico</i>
</p>
Pinte de vermelho o itálico que está
dentro da tag b, que por sua vez
está dentro da tag p.