Infelizmente a pergunta marcada como "possível duplicata" (e as suas respostas) abordam outra coisa, especificamente o funcionamento da variável
n
em fórmulas passadas no:nth-child()
, o que não contempla e nem respondem às dúvidas expostas nesta pergunta.
Fiz algumas pesquisas e vi que a pseudo-classe :nth-child()
não funciona quando usada com classes. Por exemplo:
.classe:nth-child(1){
color: red;
}
<div>texto preto</div>
<div class="classe">este texto era pra ser vermelho :(</div>
<div class="classe">texto preto</div>
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):
.classe:nth-child(2){
color: red;
}
<div>texto preto</div>
<div class="classe">este texto é vermelho, mas não deveria :/</div>
<div class="classe">este texto era pra ser vermelho :(</div>
Ora, se o .nth-child()
não funciona com classes, por que quando eu altero o valor para (2)
a propriedade é aplicada no elemento errado, e com o valor (1)
nada acontece?
E quando eu removo a classe da segunda div
, ao contrário do exemplo anterior, nada acontece:
.classe:nth-child(2){
color: red;
}
<div>texto preto</div>
<div>texto preto</div>
<div class="classe">texto preto</div>
No exemplo acima, se eu alterar o valor de (1)
para (3)
, irá alterar a cor da última div
, a que tem a classe .classe
. Mas, se eu remover a classe da div
, nada acontecerá.
Ou seja, a classe está fazendo alguma influência, só não consegui entender que influência seria essa.
A dúvida é: o estilo .classe:nth-child()
não deveria ser ignorado pelo CSS? Qual o critério que o CSS utiliza nesses casos, já que no segundo exemplo a cor foi alterada (mesmo sendo no elemento não desejado)?