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

Preselecciona un conjunto de elementos secundarios antes de aplicar la lógica de 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 por su índice. Con la microsintaxis An+B, obtienes un control preciso sobre los elementos que deseas seleccionar.

• :nth-child(2): Selecciona el 2º hijo.
• :nth-child(2n): Selecciona todos los elementos secundarios pares (el 2º, el 4º, el 6º, el 8º, etcétera).
• :nth-child(2n+1): Selecciona todos los elementos secundarios impares (1°, 3°, 5°, 7°, etcétera).
• :nth-child(5n+1): Selecciona el hijo 1º (=(5×0)+1), 6º (=(5×1)+1), 11º (=(5×2)+1), …
• :nth-child(5n+2): Selecciona el 2º (=(5×0)+2), 7º (=(5×1)+2), 12º (=(5×2)+2)… elemento secundario.

Sin embargo, puedes hacer más selecciones creativas si omites el parámetro A. Por ejemplo:

• :nth-child(n+3): Selecciona todos los elementos secundarios a partir del tercero (3°, 4°, 5°, etcétera).
• :nth-child(-n+5): Selecciona todos los elementos secundarios hasta el quinto (1°, 2°, 3°, 4° y 5°).

Combina algunas de estas selecciones de :nth-child() y podrás seleccionar rangos de elementos:

• :nth-child(n+3):nth-child(-n+5): Selecciona todos los elementos secundarios desde el tercero hasta el quinto (3°, 4° y 5°).

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

Cómo prefiltrar selecciones con la sintaxis of S

Una novedad en CSS Selectors Level 4 es la capacidad de pasar, de forma 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 los elementos que coinciden con la lista de selectores determinada S. Esto significa que puedes prefiltrar los elementos secundarios antes de que An+B haga su trabajo.

Ejemplos

Por ejemplo, :nth-child(2 of .highlight) selecciona el segundo elemento coincidente que tiene la clase .highlight. En otras palabras, de todos los hijos con la clase .highlight, selecciona el segundo.

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 rosa.
• 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 una coma. Por ejemplo, :nth-child(4 of .highlight, .sale) selecciona el cuarto elemento que es .highlight o .sale de un conjunto de elementos secundarios.

En la siguiente demostración, el elemento que coincide con :nth-child(4 of .highlight, .sale) tiene un contorno naranja aplicado.

Rayado de cebra, revisión

Un ejemplo clásico en el que se usa :nth-child() es cuando se crea una tabla con bandas. 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 las tablas estáticas, se vuelve problemático cuando comienzas a filtrar de forma dinámica el contenido de la tabla. Por ejemplo, cuando se oculta la segunda fila, se ven las filas uno y tres, cada una con el mismo color de fondo.

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

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

Es muy útil, ¿verdad?

Foto de Markus Spiske en Unsplash