: selector n-child (par / impar) con clase

Estoy intentando aplicar selectores impares / pares a todos los elementos en una lista con el padre de la clase.

HTML:

  • green
  • red
  • ho ho ho
  • green
  • red

CSS:

 .parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: red; } ul { width:100px; height: 100px; display: block; } 

enter image description here

Enlace a jsFiddle

Pero los colores se están restableciendo. Quiero que los elementos de la lista sean del color del texto.

¿Hay alguna forma de hacer esto?

En general, lo que quiere no es posible, pero hay una forma de lograr el comportamiento deseado para un número limitado de elementos “excluidos”: el combinador general de hermanos ~ .

La idea es que para cada aparición de un elemento no- .parent elementos posteriores de .parent tendrán sus colores alternos:

 .parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: red; } /* after the first non-.parent, toggle colors */ li:not(.parent) ~ .parent:nth-child(odd) { background-color: red; } li:not(.parent) ~ .parent:nth-child(even) { background-color: green; } /* after the second non-.parent, toggle again */ li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) { background-color: green; } li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) { background-color: red; } 

Véalo en acción .

Por supuesto, hay un límite en cuanto a qué tan lejos estaría dispuesto a tomar esto, pero es lo más cercano que se puede obtener con CSS puro.

Esta es una percepción errónea común

Los selectores :nth-child y :nth-of-type no miran “clase” o cualquier otra cosa para contar. Solo observan (1) todos los elementos, o (2) todos los elementos de un cierto “tipo” (no clase , no un atributo , nada más que el tipo de elemento – div o li etc.).

Por lo tanto, no puede omitirlo con CSS puro sin conocer su estructura html exacta (y luego, solo si de hecho hay algunos elementos con los que está tratando, consulte la respuesta de Jon de esa manera, donde necesita saber cuántos no -parent elementos con los que está tratando, y como puede ver y nota que los límites prácticos son muy pequeños), o mediante el uso de javascript.

Solo será posible con los Selectores CSS 4 que tendrán n-match .

En el CSS existente solo se puede hacer en algunas situaciones limitadas usando los tiempos de varios dispositivos del combinador hermano, como en la respuesta de @ Jon o incluso de una manera más ‘mecánica’ ( ejemplo ):

 .parent, .parent ~ .parent ~ .parent, .parent ~ .parent ~ .parent ~ .parent ~ .parent, .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent { background-color: green; } .parent ~ .parent, .parent ~ .parent ~ .parent ~ .parent, .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent, .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent { background-color: red; } 

En la práctica, me parece mejor usar JS / jQuery para esto.

CSS

La otra forma confiable de replicar esto actualmente es con el selector de hermanos adyacente:

 .parent, .parent + .parent + .parent, .parent + .parent + .parent + .parent + .parent /* etc */ { background-color: green; } .parent + .parent, .parent + .parent + .parent + .parent /* etc */ { background-color: red; } 

Tienes tres opciones:

  • Use el selector not() . Esto mantendrá su resaltado funcionando indefinidamente, pero de vez en cuando dará la vuelta al orden en el que se resalta . Utilice esta opción si su lista puede tener grandes agrupaciones de los elementos que desea resaltar.
  • Use el selector + (hermano adyacente). Esta opción no seguirá resaltándose indefinidamente , pero garantiza que la orden nunca se volteará. Utilice esta opción si su lista tendrá grupos más pequeños de elementos resaltados juntos.
  • Use el selector ~ (cualquier hermano). No recomendaría esto, ya que la lista no se destacará correctamente en función de la longitud total de la lista en lugar de los hermanos totales coincidentes . Esto siempre fallará antes que las otras dos opciones, y más notablemente.

Violín aquí: http://jsfiddle.net/corymcd/kVcZJ/

Siéntase libre de copiar el HTML de esto y pegarlo en los que las otras personas demostraron sus métodos.

jQuery

Como se dijo anteriormente, el uso de algo como jQuery le permitiría asignar sus elementos pares / impares o simplemente cambiar el estilo en línea.

 // Find all objects to highlight, remove all of the highlighting classes, // and then re-highlight. $(".parent").removeClass('odd even').each(function(index) { var objPrev = $(this).prev('.parent'); if( objPrev.hasClass('odd') ) { $(this).addClass('even'); } else { $(this).addClass('odd'); } }); 

Violín aquí: http://jsfiddle.net/corymcd/kAPvX