: enésimo último de tipo - Trucos CSS

El :nth-last-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. Funciona igual que, :nth-of-typeexcepto que selecciona elementos comenzando en la parte inferior del orden de origen, no en la parte superior.

Supongamos que tenemos una lista desordenada y deseamos resaltar el penúltimo elemento (en este ejemplo exacto, el "Cuarto elemento"):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

En lugar de hacer algo como agregar una clase al elemento de la lista (por ejemplo .highlight), podemos usar :nth-last-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Como puede ver, :nth-last-of-typetoma un argumento: este puede ser un solo entero, las palabras clave "par" o "impar", o 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 en JavaScript. Las palabras clave "pares" e "impares" son sencillas (2, 4, 6, etc. o 1, 3, 5, etc. 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 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-last-of-typeselectores válidos :

Vea los trucos de CSS de Pen: nth-last-of-type de Chris Coyier (@chriscoyier) en CodePen.

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

Probador de trucos CSS
Probador de Lea Verou

Puntos de interés

:nth-last-of-typeitera a través de elementos comenzando desde la parte inferior del orden de origen. La única diferencia entre esto y :nth-of-typees que este último itera a través de elementos comenzando desde la parte inferior del orden de origen.
El :nth-last-of-typeselector es muy similar :nth-last-childpero con una diferencia fundamental: es más específico. En nuestro ejemplo anterior, producirían el mismo resultado porque estamos iterando solo sobre lielementos, pero si estuviéramos iterando sobre un grupo más complejo de hermanos, :nth-last-childintentaríamos hacer coincidir todos los hermanos, no solo los hermanos del mismo tipo de elemento. Esto revela el poder de :nth-last-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-last-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.