El :nth-of-typeselector le permite seleccionar uno o más elementos según su orden de origen, según una fórmula. 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 tenemos una lista desordenada y deseamos alternar elementos de la lista con "rayas de cebra":
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
En lugar de agregar clases a cada elemento de la lista (por ejemplo, .even& .odd) podemos usar :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Como puede ver, :nth-of-typetoma un argumento: este puede ser un único entero, las palabras clave "par" o "impar", o una fórmula como se muestra arriba. Si se especifica un número entero, solo se selecciona un elemento, pero las palabras clave o una fórmula recorrerán todos los elementos secundarios del elemento principal y seleccionarán elementos coincidentes, similar a la navegación de elementos en una matriz en JavaScript. Las palabras clave "pares" e "impares" son sencillas, pero la fórmula se construye utilizando 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 segundo elemento con la fórmula 2n, que funcionó porque cada vez que se marcaba un elemento, “n” aumentaba en uno (2 × 0, 2 × 1, 2 × 2, 2 × 3, etc.). Si el orden de un elemento coincide con el resultado de la ecuación, se selecciona (2, 4, 6, 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-of-typeselectores válidos :
Afortunadamente, no siempre tienes que hacer los cálculos tú mismo; existen varios :nth-of-typeprobadores y generadores:
- Probador de trucos CSS
- Probador de Lea Verou
Puntos de interés
:nth-of-typeitera a través de elementos comenzando desde la parte superior del orden de origen. La única diferencia entre esto y:nth-last-of-typees que este último itera a través de elementos comenzando desde la parte inferior del orden de origen.- El
:nth-of-typeselector es muy similar:nth-childpero con una diferencia fundamental: es más específico. En nuestro ejemplo anterior, producirían el mismo resultado porque estamos iterando solo sobrelielementos, 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-of-type- se dirige a un tipo particular de elemento en un arreglo con relación a hermanos similares, no a todos los hermanos.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | 3.2+ | Trabajos | 9.5+ | 9+ | Trabajos | Trabajos |
:nth-of-typese 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.