El :last-childselector le permite apuntar al último elemento directamente dentro de su elemento contenedor. 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 el contenido principal y hermano.
Supongamos que tenemos un artículo y queremos hacer el último párrafo más pequeño, para que actúe como una conclusión del contenido (como una nota del editor):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
En lugar de usar una clase (por ejemplo .last), podemos usar :last-childpara seleccionarla:
p:last-child ( font-size: 0.75em; )El uso :last-childes muy similar :last-of-typepero con una diferencia fundamental: es menos específico. :last-childsolo intentará hacer coincidir el último hijo de un elemento padre, mientras last-of-typeque coincidirá con la última aparición de un elemento especificado, incluso si no aparece en último lugar en el HTML. En el ejemplo anterior, el resultado sería el mismo, solo porque el último hijo de articletambién es el último pelemento. Esto revela el poder de :last-child: puede identificar un elemento con relación a todos sus hermanos, no solo a los hermanos del mismo tipo.
El ejemplo más completo a continuación demuestra el uso de :last-childy un selector pseudo-clase relacionada, :first-child.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3.2+ | Alguna | 9.5+ | 9+ | Alguna | Alguna |
: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.