html - support - essential grid wordpress plugin free download

: selector de nth-child(par/impar) con clase

Question

Esta pregunta ya tiene una respuesta aquí:

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

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

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

Enlace a jsFiddle

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

¿Hay alguna forma de hacer esto?

Answer 1

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:

• Utilice el selector not() . Esto mantendrá su selección destacando indefinidamente, pero ocasionalmente cambiará el orden en que se destaca . Utilice esta opción si su lista podría tener grandes agrupaciones de los elementos que desea resaltar.
• Utilice el selector + (hermano adyacente). Esta opción no seguirá destacándose de manera indefinida , pero garantiza que el pedido nunca se cambiará. Use esta opción si su lista tendrá grupos más pequeños de elementos resaltados juntos.
• Utilice el selector ~ (cualquier hermano). No recomendaría esto, ya que la lista no se resaltará correctamente en función de la longitud total de la lista en lugar del total de hermanos coincidentes . Esto siempre fallará antes de las otras dos opciones, y más notablemente.

Fiddle aquí: http://jsfiddle.net/corymcd/kVcZJ/

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

jQuery

Como se indicó anteriormente, usar algo como jQuery le permitiría fácilmente asignar sus elementos a clases 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'');
    }    
});

Fiddle aquí: http://jsfiddle.net/corymcd/kAPvX

Answer 2

Este es un error común

Los selectores :nth-child y :nth-of-type no miran a "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 hay algunos elementos con los que se está ocupando, vea la respuesta de Jon para una de esas maneras, donde necesita saber cuántos no). -los elementos de los padres con los que está tratando, y como puede ver y señala que los límites prácticos son muy pequeños), o mediante el uso de javascript.

Answer 3

En general, lo que desea no es posible, pero hay una manera 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 .parent subsiguientes tendrán sus colores alternados:

.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 a lo lejos que uno estaría dispuesto a tomar esto, pero es lo más cercano que puede obtener con CSS puro.

Answer 4

Solo será posible con los selectores de CSS 4, que tendrán nth-match .

En el CSS existente, se puede hacer solo en algunas situaciones limitadas utilizando el combinador general de hermanos en varias ocasiones, como en la respuesta de @Jon o incluso de una manera más "mecánica" ( example ):

.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.