nth-child no responde a la clase [duplicado]
Esta pregunta ya tiene una respuesta aquí:
¿Puedo combinar: nth-child () o: nth-of-type () con un selector arbitrario? 4 respuestasEs posible hacer que el pseudo-selector nth-child funcione con una clase específica?
Ver este ejemplo:http: //jsfiddle.net/fZGvH
Quiero que el segundo DIV.red se vuelva rojo, pero no aplica el color como se esperaba.
No solo eso, pero cuando especificas esto, cambia el 5to DIV a rojo:
div.red:nth-child(6)
Cuando especifica esto, cambia el octavo DIV a rojo:
div.red:nth-child(9)
Parece ser un DIV detrás. Solo hay 8 etiquetas DIV en el ejemplo, así que no sé por qué nth-child (9) incluso funciona. Pruebas con Firefox 3.6, pero en mi código de producción real ocurre el mismo problema en Chrome. No entiendo algo sobre cómo se supone que funciona, agradecería una aclaración.
Además, esto cambiará el 6to DIV a rojo, pero lo que realmente quiero es que cambie el segundo DIV.red a rojo:
div.red:nth-of-type(6)
Y no entiendo por qué nth-child () y nth-of-type () responden de manera diferente, ya que solo hay ocho etiquetas del mismo tipo en el documento.