El :nth-last-childselector 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-childexcepto que selecciona elementos comenzando en la parte inferior del orden de origen, no en la parte superior.
Supongamos que tenemos una lista con un número desconocido de elementos 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-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Como puede ver, :nth-last-childtoma 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 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 :
Afortunadamente, no siempre tienes que hacer los cálculos tú mismo; existen varios :nth-last-childprobadores y generadores:
- Probador de trucos CSS
- Probador de Lea Verou
Puntos de interés
:nth-last-childitera a través de elementos comenzando desde la parte inferior del orden de origen. La única diferencia entre esto y:nth-childes que este último itera a través de elementos comenzando desde la parte superior del orden de origen.- El
:nth-last-childselector es muy similar:nth-last-of-typepero con una diferencia fundamental: es menos 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-last-childintentaríamos hacer coincidir todos los hermanos, no solo los hermanos del mismo tipo de elemento. Esto revela el poder de::nth-last-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 |
|---|---|---|---|---|---|---|
| Trabajos | 3.2+ | Trabajos | 9.5+ | 9+ | Trabajos | Trabajos |
:nth-last-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.