has - css selectores

enésimo niño no responde a la clase

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Puedo combinar: nth-child () o: nth-of-type () con un selector arbitrario? 4 respuestas

¿Es posible hacer que el pseudo-selector n-child trabaje con una clase específica?

Vea este ejemplo: http://jsfiddle.net/fZGvH/

Quiero que el segundo DIV.red se ponga rojo, pero no aplica el color como se esperaba.

No solo eso, sino que cuando especifica esto, cambia el quinto DIV a rojo:

div.red:nth-child(6)

Cuando especifica esto, cambia el 8vo DIV a rojo:

div.red:nth-child(9)

Parece ser una DIV detrás. Solo hay 8 etiquetas DIV en el ejemplo, así que no sé por qué nth-child (9) incluso funciona. Probando con Firefox 3.6, pero en mi código de producción real ocurre el mismo problema en Chrome. No estoy entendiendo algo sobre cómo se supone que funciona, agradecería una aclaración.

Además, esto cambiará el sexto DIV al rojo, pero lo que realmente quiero es que cambie el segundo DIV.red al 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.

Answer 1

No hay forma de filtrar por clase en CSS porque no hay :nth-of-class() selector :nth-of-class() . Una forma de evitar esto es colocar los dos tipos diferentes de div en sus propios grupos, luego seleccionar en función de esos grupos. Por ejemplo:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Con este selector:

div.red div:nth-child(2) {
    background: red;
}

Respecto a la última parte de tu pregunta:

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.

Para el código que das allí no debería haber ninguna diferencia. Lo probé y las dos pseudo-clases funcionan como se esperaba. Pero en general:

:nth-child() opera en un nivel completo de hermanos sin tener en cuenta otros selectores simples. Entonces, si el n-ésimo niño no se encuentra entre los que coinciden con los simples selectores, no hay coincidencia.

:nth-of-type() opera en un nivel de hermanos del tipo dado sin tener en cuenta otros selectores simples. Entonces, si el elemento n-ésimo que ocurre de ese tipo no se encuentra entre los selectores simples, no hay coincidencia.

Answer 2

Puede usar el combinador general de hermanos:

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

Es detallado y necesita restablecer los estilos nuevamente, pero podría ser útil en algunas situaciones especiales.

Podría ser automatizado con un preprocesador CSS, y si entiendo gzip correctamente, dado que la salida CSS está repitiendo el mismo texto, el tamaño del archivo gziped no debería ser demasiado grande a menos que lo use mucho.

Answer 3

hay una solución más simple que he encontrado para trabajar con mis div sin líneas especiales de código.

.red:nth-child(6) {background-color:#ccc;}
.red:nth-child(9) {background-color:#eee;}

funciona bien también sin el div delante.

Answer 4

<div class="alpha">
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
  <div class="beta"></div>
</div>

... si quieres ordenar div.beta por nth-child, debes establecer al menos width = auto en div.alpha, probablemente funcione.