:nth-child entre dos índices fijos | Programar Plus

Necesitaba seleccionar algunos elementos entre dos índices fijos el otro día, como literalmente del segundo al quinto elemento. Irónicamente, tengo una publicación completa sobre “Recetas útiles para :nth-child”, pero esta no era una de ellas.

Resulta que la respuesta no es tan complicada. Pero me torció un poco el cerebro.

Digamos que desea seleccionar todos los divs desde el segundo y más allá:

div:nth-child(n + 2) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [x]  [x], etc. */

Eso tiene sentido lógico para mí. Si n es 0, la expresión es 2, y n incrementa hacia arriba desde allí y selecciona todo lo que está más allá.

Pero entonces, ¿cómo “detienes” la selección en un índice específico? Me gusta…

/* Not real */
div:nth-child(minmax(2, 5)) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [ ]  [ ], etc. */

Bueno, podemos hacer lo contrario, seleccionando solo el primer conjunto de elementos y luego deteniéndonos (restringiendo en la otra dirección) invirtiendo el valor de n.

div:nth-child(-n + 6) {

}
/* [x]  [x]  [x]  [x]  [x]  [ ]  [ ]  [ ], etc. */

Eso seleccionará los primeros cinco elementos y luego se detendrá porque, como n se hace más grande, el valor de la expresión va a 0 y en números negativos.

Entonces, el truco de CSS aquí es combinar ambos :nth-child expresiones

Sabemos que los pseudo-selectores de CSS son aditivos en el sentido de que ambos deben ser verdaderos para poder seleccionarlos.

a:first-child:hover {
  /* selects the <a> if it is BOTH the first child and in a hover state */
}

Para lograr la idea de “2 y más” y “5 y menos” encadenamos los pseudo-selectores:

div:nth-child(n + 2):nth-child(-n + 6) {
  background: green;
}

Eso servirá:

La parte que retorció mi cerebro fue pensar en pseudo-selectores “aditivos”. Estaba pensando que seleccionar “2 y más” haría exactamente eso, y “5 y menos” haría exactamente eso, y esas cosas combinadas significaban “todos los elementos”. Pero eso es sólo un pensamiento equivocado. Son las condiciones las que son aditivas, lo que significa que cada elemento debe cumplir ambas condiciones.

Si encuentra esto confuso como lo hice yo, espere hasta que verifique Quanity Queries. Al anidar una gran cantidad de pseudo-selectores de estilo n, puede crear una lógica que, por ejemplo, solo seleccione elementos dependiendo de cuántos de ellos estén en el DOM.

div:nth-last-child(n+2):nth-last-child(-n+5):first-child, 
div:nth-last-child(n+2):nth-last-child(-n+5):first-child ~ div {
  /* Only select if there are at least 2 and at most 5 */
}

Una explicó esto aún más para nosotros hace un tiempo.

(Visited 3 times, 1 visits today)