O seletor
nth-child(n)
corresponde a cada elemento que é o enésimo filho, independentemente do tipo, de seu pai.
Ao utilizar tal seletor, você deve atentar-se principalmente ao elemento pai.
Difícil entender, mas é assim mesmo! Você cria o seletor e ele considera todos os elementos filhos de seu pai! (Bugou?!)
"- O texto do primeiro elemento da classe
.classe
não fica vermelho, como se esperaria. Porém, se eu alterar o valor do.nth-child
para(2)
, irá aplicar a cor vermelha ao primeiro elemento da classe (não ao segundo, como se esperaria)." (sic)
Veja este exemplo (na pergunta):
<!DOCTYPE html>
<html>
<head>
<style>
.classe:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<div>texto preto</div>
<div class="classe">este texto era pra ser vermelho :(</div>
<div class="classe">texto preto</div>
</body>
</html>
<body>
é o elemento pai;<div>texto preto</div>
é o elemento filho #1. Equivalente a:nth-child(1)
;<div class="classe">este texto era pra ser vermelho :(</div>
é o elemento filho #2. Equivalente a:nth-child(2)
;<div class="classe">texto preto</div>
é o elemento filho #3. Equivalente a:nth-child(3)
;
Acontece que para o seletor .classe:nth-child(1)
funcionar no filho #1, ele não poderia ter mencionado a classe-alvo: .classe
! Dessa forma, só vai "bindar" quando bater o número do elemento com a classe (Ahh, e não se esqueça do papai!).
Outra questão: se consideram os filhos do pai! Independente de qual for o tipo do filho! Veja:
<body>
<div>texto preto</div>
<p class="classe">este texto era pra ser vermelho :(</p>
<span class="classe">texto preto</span>
<strong>texto preto</strong>
<i>texto preto</i>
</body>
<body>
é o elemento pai;<div>texto preto</div>
é o elemento filho #1;<p class="classe">este texto era pra ser vermelho :(</p>
é o elemento filho #2;<span class="classe">texto preto</span>
é o elemento filho #3;<strong>texto preto</strong>
é o elemento filho #4;<i>texto preto</i>
é o elemento filho #5;