www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

Cómo elegir el par/impar de elementos secundarios de un padre solo con una clase específica?

cluberr 2018-06-05 16:34:34

Qué selector puede seleccionar pares/impares elementos secundarios para .parent con la clase .child ?

<div class="parent">
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div class="child">block</div>
  <div>block</div>
  <div class="child">block</div>
  <div>block</div>
  <div class="child">block</div>
</div>

antowa_plawkevich 2018-06-05 16:40:43

:nth-child - lea sobre псевдоклас


kawabanga 2018-06-05 16:51:48

antowa_plawkevich, yo también al principio se pensaba que la tarea de las veces de un tirón. Quizás el autor más fácil de añadir un div en el código?
https://jsfiddle.net/j58sk0h7/6/


cluberr 2018-06-05 17:03:19

kawabanga, el código se genera en esta forma, como en el ejemplo de la pregunta , no hay posibilidad de modificar la estructura de la


antowa_plawkevich 2018-06-05 17:04:31

kawabanga, habría hecho así var selectedOddElements = $("p.myClass:odd");
y, en consecuencia, incluso para las


cluberr 2018-06-05 17:06:07

antowa_plawkevich, es js y CSS )


kawabanga 2018-06-05 17:09:50

cluberr, si el js no, y los bloques no hay muchos de esos? tal vez ellos tienen la repetición, entonces será más fácil para cada elemento el número de establecer una descripción de css.


cluberr 2018-06-05 17:14:23

kawabanga, .los bloques puede ser un número arbitrario de


kawabanga 2018-06-05 17:17:08

cluberr, Coge la respuesta en las respuestas. algo así como debería funcionar. tal esencia - que colorea primero

.child
luego переписываем los elementos que necesitamos recuperar.


ned4ded 2018-06-05 17:22:34

cluberr

En general, no existe el selector en la cp / rp, que permitirá combinar "nth-child" o "nth-of-type" y la clase. nth-child siempre será seleccionar cada elemento de resultado de la fórmula соответсвующему la posición de dicho elemento de los padres, si se ha añadido la clase de lo que cada elemento con la clase. Es decir, si usted elige .child:nth-child(1) - este no es el primer miembro de la clase child, será el control de la clase child, que se encuentra en la posición 1 el de su padre.

La única opción es js.


cluberr 2018-06-05 17:24:37

ned4ded, escriban en la respuesta, y no un comentario


Total answers: 3

ned4ded 2018-06-05 17:45:28

Respuesta: es Imposible llevar a cabo dicha selección usando un selector de css.

Cada elemento de la casa está incluido en la "lista de сиблингов" (яхз como normalmente traducir list of siblings), es decir, la lista de tales nod, que son descendientes directos de una sola célula noda.

Todos los estructurales pseudo-clases (:nth-child :nth-of-type, etc) funcionan exactamente con la lista de tales nod, es decir, dejando al descubierto cualquier селектору pseudo ":nth-child()" elige sólo los elementos para la posición de que en la lista de сиблингов fiel a la establecida en el nth-child fórmula.

En el ejemplo de la: .child:nth-child(1) { color: red; } no se mostrará ningún elemento, por la razón de que ninguno .child elemento no es el primero en la lista de сбилнгов; sin embargo,, .child:nth-child(4) { color: red; } mostrará el primer elemento con la clase .child en el ct ejemplo, porque él es de 4 elementos en la lista de sus сиблингов.

Conclusión: sin js usted no será capaz de hacer una selección. Yo veo dos soluciones: 1) usted окрашиваете en el lado del cliente de estos elementos a través de la js, 2) se espera que en el lado de la beca, cuál de los elementos es par y se agrega a ello la clase .child--view--incluso, que en los estilos se colorar su elemento en color rojo.

Para el frente:

(() => {
	const elements = document.getElementsByClassName('child');
  
  const rec = (arr) => {
    if(!arr.length) return;
    
    const [even, odd, ...rest] = arr;
    
    even.setAttribute('style', 'color: red');
    
    return rec(rest);
  }
  
  rec(elements);
  
  return;
})();


ps si usted va a utilizar el ejemplo en su forma pura, lo mejor de su отбабелить

kawabanga 2018-06-05 17:16:12

https://jsfiddle.net/j58sk0h7/23/

jkd 2018-06-05 17:19:39

Tiene el orden de la VID, no es la misma.. invierta y se sorprenda


kawabanga 2018-06-05 17:27:33

jkd, Que asombrarse? Tenemos selectores hay pares e impares. soy especialista cambiado de lugar, para ver en concreto lo que este elemento de par y el impar .
https://jsfiddle.net/j58sk0h7/29/


jkd 2018-06-06 11:55:15

Simplemente el resultado no es el que desea...
Y la persona que escribe, que no se puede cambiar el formato de salida.
Y usted подмухлевали solución, o aquí un significado más profundo :-)


kawabanga 2018-06-06 12:38:46

jkd,
La tarea de la persona, si estoy en lo cierto en la cuenta, se reduce para atrapar a ese css:
.parent div:nth-child(odd) .child {}

Pero esto no es posible, como se describe anteriormente.

Pero me ofreció una variante en la que hacemos la inversión.
es decir, primero закрашиваем todos .child
y luego de arriba devolvemos a la vista normal normales impar de elementos .parent div
Mejor - https://jsfiddle.net/j58sk0h7/33/

cluberr Conecte aquí a nuestro debate.


jkd 2018-06-06 13:08:54

Pero su opción no funciona en el marco suministrado a los conocimientos tradicionales, o yo que no entiendo... Pregunte? en su ejemplo, ni la compaginacin no corresponde a la requerida, ni el resultado visual. Cual es el valor de ejemplo?


kawabanga 2018-06-06 15:35:02

jkd, que la maquetación no corresponde? Si me di cuenta de la tarea, la persona necesita no es impar .child elegir, y elegir impar .parent div y si es impar, y tiene clase .child, atribuirle ciertas propiedades. ya que as? Y ahora yo te присылаю variante de origen donde cada una .child es impar. -

https://jsfiddle.net/j58sk0h7/34/


jkd 2018-06-06 15:39:49

kawabanga, Sí.. ahora tienes la compaginacin corresponde. Pero el resultado no. Así como es necesario par/impar considerar exclusivamente a las poblaciones .child. Aquellos en el ejemplo 2 de un color y otro de otro... Esto no sucede.
Los colegas de arriba muy explicamos por qué esto no es posible con el uso de css, por lo que son, y gracias...
Ps: creo que el tema está cerrado... lo Siento, si ha usted que personalmente.


kawabanga 2018-06-06 16:04:07

jkd, entonces la autora debería haber mostrar el resultado de los elementos que deben ser подкрашенными.
Así como el texto se lee de forma diferente:
pares elementos secundarios para .parent con la clase .child
pares de elementos .child bajo .parent.

y muy detalladamente se describe como más acerca de la tarea del autor aquí - https://medium.com/@MateMarschalko/css-select-nth-...


jkd 2018-06-05 17:17:32

Ya no es igual? La verdad no es muy CSS ^-)

$(function(){
$("div.parent div.child:odd").css("background-color", "#F00");
$("div.parent div.child:even").css("background-color", "#00F");

});

https://jsfiddle.net/j58sk0h7/24/

Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.