: nth-child - Trucos CSS

Tabla de contenido

El :nth-childselector le permite seleccionar uno o más elementos según su orden de origen, según una fórmula.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Se define en la especificación CSS Selectors Level 3 como una "pseudoclase estructural", lo que significa que se utiliza para diseñar contenido en función de su relación con elementos padres y hermanos.

Supongamos que estamos construyendo una cuadrícula CSS y queremos eliminar el margen en cada cuarto módulo de cuadrícula. Aquí está ese HTML:

 One Two Three Four Five

En lugar de agregar una clase a cada cuarto elemento (por ejemplo .last), podemos usar :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

El :nth-childselector toma un argumento: esto puede ser un solo número entero, las palabras clave even, oddo una fórmula. Si se especifica un número entero, solo se selecciona un elemento, pero las palabras clave o una fórmula iterarán a través de todos los elementos secundarios del elemento principal y seleccionarán elementos coincidentes, similar a la navegación de elementos en una matriz de JavaScript. Las palabras clave "pares" e "impares" son sencillas (2, 4, 6, etc. o 1, 3, 5 respectivamente). La fórmula se construye usando la sintaxis an+b, donde:

  • "A" es un valor entero
  • "N" es la letra literal "n"
  • "+" Es un operador y puede ser "+" o "-"
  • "B" es un número entero y se requiere si se incluye un operador en la fórmula

Es importante tener en cuenta que esta fórmula es una ecuación y recorre cada elemento hermano, determinando cuál se seleccionará. La parte "n" de la fórmula, si se incluye, representa un conjunto de números enteros positivos crecientes (al igual que iterar a través de una matriz). En nuestro ejemplo anterior, seleccionamos cada cuarto elemento con la fórmula 4n, que funcionó porque cada vez que se marcaba un elemento, “n” aumentaba en uno (4 × 0, 4 × 1, 4 × 2, 4 × 3, etc.). Si el orden de un elemento coincide con el resultado de la ecuación, se selecciona (4, 8, 12, etc.). Para obtener una explicación más detallada de las matemáticas involucradas, lea este artículo.

Para ilustrar más, aquí hay algunos ejemplos de :nth-childselectores válidos :

Afortunadamente, no siempre tienes que hacer los cálculos tú mismo; existen varios :nth-childprobadores y generadores:

  • Probador de trucos CSS
  • Probador de Lea Verou

: enésimo hijo (an + b de)

Existe un filtro poco conocido que se puede agregar de :nth-childacuerdo con la especificación de Selectores CSS: La capacidad de seleccionar el :nth-childde un subconjunto de elementos, usando el of formato. Suponga que tiene una lista de contenido mixto: algunos tienen la clase .video, otros tienen la clase .picturey desea seleccionar las primeras 3 imágenes. Puede hacerlo con el filtro "de" así:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Tenga en cuenta que esto es distinto de agregar un selector directamente al :nth-childselector:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Esto puede resultar un poco confuso, por lo que un ejemplo podría ayudar a ilustrar la diferencia:

La compatibilidad del navegador con el filtro "de" es muy limitada: en el momento de escribir este artículo, solo Safari admitía la sintaxis. Para verificar el estado de su navegador favorito, aquí hay problemas abiertos relacionados con :nth-child(an+b of s):

  • Firefox: Soporte para nth-child (An + B de sel)
  • Chrome: Implementar: nth-child (an + b of S)

Puntos de interés

  • :nth-childitera a través de elementos comenzando desde la parte superior del orden de origen. La única diferencia entre esto y :nth-last-childes que este último itera a través de elementos comenzando desde la parte inferior del orden de origen.
  • La sintaxis para seleccionar el primer nnúmero de elementos es un poco contraintuitiva. Empiece con -n, más el número positivo de elementos que desea seleccionar. Por ejemplo, li:nth-child(-n+3)seleccionará los primeros 3 lielementos.
  • El :nth-childselector es muy similar :nth-of-typepero con una diferencia fundamental: es menos específico. En nuestro ejemplo anterior, producirían el mismo resultado porque estamos iterando solo sobre .moduleelementos, pero si estuviéramos iterando sobre un grupo más complejo de hermanos, :nth-childintentaríamos hacer coincidir todos los hermanos, no solo los hermanos del mismo tipo de elemento. Esto revela el poder de: :nth-childpuede seleccionar cualquier elemento hermano en un arreglo, no solo los elementos que se especifican antes de los dos puntos.

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
Alguna 3.2+ Alguna 9.5+ 9+ Alguna Alguna

:nth-childse introdujo en CSS Selectors Module 3, lo que significa que las versiones antiguas de los navegadores no lo admiten. Sin embargo, la compatibilidad con los navegadores modernos es impecable y los nuevos pseudo-selectores se utilizan ampliamente en entornos de producción. Si necesita compatibilidad con un navegador más antiguo, ya sea polyfill para IE o utilice estos selectores de formas no críticas, como la mejora progresiva, que se recomienda.

Articulos interesantes...