Más control sobre las selecciones de :nth-child() con la sintaxis de S

Filtra previamente un conjunto de elementos secundarios antes de aplicarle la lógica An+B.

Bramus

Los selectores de seudoclase :nth-child() y :nth-last-child()

Con el selector de seudoclase :nth-child(), es posible seleccionar elementos en el DOM según su índice. Con la microsintaxis An+B, obtienes un control preciso sobre los elementos que quieres seleccionar.

  • :nth-child(2): Selecciona el segundo elemento secundario.
  • :nth-child(2n): Selecciona todos los elementos secundarios incluso (2°, 4°, 6°, 8°, etc.).
  • :nth-child(2n+1): Selecciona todos los elementos secundarios impares (1er, 3rd, 5th, 7th, etcétera).
  • :nth-child(5n+1): Selecciona el 1o (=(5×0)+1), el 6o (=(5×1)+1), el 11 (=(5×2)+1), ... el elemento secundario.
  • :nth-child(5n+2): Selecciona el segundo (=(5×0)+2), el séptimo (=(5×1)+2), el 12 (=(5×2)+2), ... elemento secundario.

Sin embargo, puedes realizar más selecciones de creatividades si omites el parámetro A. Por ejemplo:

  • :nth-child(n+3): Selecciona a todos los elementos secundarios del 3er en lugar de (3o, 4o, 5o, etc.).
  • :nth-child(-n+5): Selecciona a todos los niños hasta el 5o (1er, 2nd, 3rd, 4th, 5th).

Combina algunas de estas selecciones de :nth-child() y puedes seleccionar rangos de elementos:

  • :nth-child(n+3):nth-child(-n+5): Selecciona a todos los niños, del 3er al 5o (3°, 4°, 5°).

Con :nth-last-child(), puedes hacer selecciones similares, pero en lugar de comenzar a contar desde el principio, se comienza a contar desde el final.

Cómo filtrar previamente las selecciones con la sintaxis of S

Novedad del nivel 4 de selectores CSS es la capacidad de pasar, de manera opcional, una lista de selectores a :nth-child() y :nth-last-child().

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Cuando se especifica of S, la lógica de An+B solo se aplica a elementos que coinciden con la lista de selectores determinada S. En esencia, esto significa que puedes prefiltrar los elementos secundarios antes de que An+B haga lo suyo.

Navegadores compatibles

  • 111
  • 111
  • 113
  • 9

Ejemplos

Por ejemplo, :nth-child(2 of .highlight) selecciona el segundo elemento coincidente que tiene la clase .highlight. Dicho de otro modo: de todos los elementos secundarios con la clase .highlight, selecciona la segunda.

Esto contrasta con .highlight:nth-child(2), que selecciona el elemento que tiene la clase .highlight y también es el segundo elemento secundario.

En la siguiente demostración, puedes ver esta diferencia:

  • El elemento que coincide con :nth-child(2 of .highlight) tiene un contorno rosado.
  • El elemento que coincide con .highlight:nth-child(2) tiene un contorno verde.
.

Ten en cuenta que S es una lista de selectores, lo que significa que acepta varios selectores separados por comas. Por ejemplo, :nth-child(4 of .highlight, .sale) selecciona el cuarto elemento .highlight o .sale de un conjunto de elementos del mismo nivel.

En la siguiente demostración, al elemento que coincide con :nth-child(4 of .highlight, .sale), se le aplicó un contorno naranja.

Patadas de cebras revisadas

Un ejemplo clásico en el que se usa :nth-child() es cuando se crea una tabla con rayas cebra. Es una técnica visual en la que cada fila de la tabla alterna los colores. Normalmente, esto se abordaría de la siguiente manera:

tr:nth-child(even) {
  background-color: lightgrey;
}

Si bien esto funciona bien para tablas estáticas, se vuelve un problema cuando comienzas a filtrar dinámicamente el contenido de la tabla. Por ejemplo, cuando la fila dos se oculta, las filas uno y tres son visibles, cada una con el mismo color de fondo.

Para solucionar este problema, podemos aprovechar :nth-child(An+B [of S]?) si excluimos las filas ocultas de la lógica An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Es muy bueno, ¿verdad?

Foto de Markus Spiske en Unsplash