enésimo filho não responde à classe [duplicado]
Esta pergunta já tem uma resposta aqui:
Posso combinar: n-filho () ou: n-do-tipo () com um seletor arbitrári 4 respostaspossível fazer com que o pseudo-seletor de enésimo filho trabalhe com uma classe específic
Veja este exemplo:http: //jsfiddle.net/fZGvH
Quero que o segundo DIV.red fique vermelho, mas ele não aplica a cor conforme o esperad
Não apenas isso, mas quando você especifica isso, ele altera o 5º DIV para vermelho:
div.red:nth-child(6)
Quando você especifica isso, ele muda o 8º DIV para vermelho:
div.red:nth-child(9)
Parece ser um DIV para trás. Existem apenas 8 tags DIV no exemplo, então não sei por que o nth-child (9) funciona. Testando usando o Firefox 3.6, mas no meu código de produção real o mesmo problema ocorre no Chrome. Não estou entendendo algo sobre como isso deve funcionar, gostaria de esclarecimentos.
Also, isso mudará o 6º DIV para vermelho, mas o que eu realmente quero é que ele altere o segundo DIV.red para vermelho:
div.red:nth-of-type(6)
Eu não entendo por que nth-child () e n-of-type () respondem de maneira diferente, pois existem apenas oito tags do mesmo tipo no document