Cuando trabajas con menús, listados de productos, galerías o cualquier estructura repetitiva, puede resultarte muy útil seleccionar los últimos elementos de una lista con CSS sin modificar el HTML.
CSS dispone de varias pseudoclases estructurales que permiten localizar elementos según su posición dentro del elemento padre, evitando tener que añadir clases manualmente.
La más importante para este caso es :nth-last-child(), una pseudoclase especialmente diseñada para contar elementos comenzando desde el final.
En este tutorial vas a aprender a utilizarla para seleccionar el último elemento, los dos últimos, los tres últimos o cualquier cantidad de elementos finales de una lista.
🔎 Además, veremos las diferencias entre :last-child, :nth-last-child() y :nth-last-of-type(), para que puedas elegir correctamente el selector según cada situación.
¿Por qué seleccionar los últimos elementos con CSS?
Imagina que tienes una lista cuyos elementos se generan automáticamente desde WordPress, WooCommerce, un plugin o una aplicación web y no puedes saber de antemano cuántos aparecerán.
Podrías añadir clases especiales a los últimos elementos utilizando JavaScript o modificando el HTML, pero en muchos casos resulta innecesario porque CSS puede detectar su posición automáticamente.
Esto te permite aplicar estilos diferentes a los elementos finales, como eliminar márgenes, ocultarlos, cambiar colores, modificar bordes o adaptar determinadas partes del diseño.
🎯 También es especialmente útil para crear layouts responsivos, donde los últimos elementos de una cuadrícula necesitan comportarse de manera diferente.
El selector :last-child para seleccionar el último elemento
La forma más sencilla de seleccionar solamente el último elemento de una lista consiste en utilizar la pseudoclase :last-child.
Por ejemplo, imagina que tienes la siguiente lista:
<ul class="lista">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ul>
Si quieres modificar únicamente el último elemento puedes utilizar este CSS:
.lista li:last-child {
font-weight: bold;
}
Con este selector estarás indicando al navegador que aplique el estilo solamente al último <li> que se encuentre dentro de .lista.
Una aplicación muy habitual consiste en eliminar el margen inferior del último elemento:
.lista li:last-child {
margin-bottom: 0;
}
✅ Este pequeño detalle puede ayudarte a evitar espacios sobrantes al final de menús, tarjetas o bloques de contenido.
Cómo seleccionar los últimos elementos con :nth-last-child()
Cuando necesitas seleccionar más de un elemento debes recurrir a :nth-last-child(), que funciona de forma parecida a :nth-child() pero comienza a contar desde el final.
La sintaxis básica es:
elemento:nth-last-child(valor) {
propiedad: valor;
}
Por ejemplo, el siguiente código selecciona el segundo elemento empezando desde el final:
.lista li:nth-last-child(2) {
font-weight: bold;
}
Si tienes cinco elementos, el selector afectará al elemento número cuatro porque es el segundo contando desde abajo.
Cómo seleccionar los dos últimos elementos de una lista
Para seleccionar varios elementos finales necesitamos combinar :nth-last-child() con una expresión matemática de CSS.
Si quieres seleccionar los dos últimos elementos utiliza:
.lista li:nth-last-child(-n + 2) {
font-weight: bold;
}
La parte fundamental del selector es:
-n + 2
Esta expresión indica a CSS que seleccione todos los elementos cuya posición desde el final sea igual o inferior a 2.
Por tanto, quedarán seleccionados el último elemento y el penúltimo.
Cómo seleccionar los tres últimos elementos con CSS
La misma técnica puede utilizarse para seleccionar los tres últimos elementos simplemente cambiando el número.
.lista li:nth-last-child(-n + 3) {
font-weight: bold;
}
En este caso CSS seleccionará los elementos que ocupen las posiciones 1, 2 y 3 contando desde el final.
💡 Esta fórmula resulta muy fácil de reutilizar porque solamente tienes que modificar el número final.
Seleccionar los últimos cuatro, cinco o más elementos
Puedes utilizar exactamente el mismo patrón para seleccionar prácticamente cualquier número de elementos.
Para seleccionar los cuatro últimos:
.lista li:nth-last-child(-n + 4) {
background: #eee;
}
Para seleccionar los cinco últimos:
.lista li:nth-last-child(-n + 5) {
background: #eee;
}
Por tanto, puedes recordar esta fórmula:
:nth-last-child(-n + X)
Donde X representa la cantidad de elementos finales que quieres seleccionar.
Pasos para seleccionar los últimos elementos de una lista
Si quieres aplicar esta técnica rápidamente en tu página web, puedes seguir estos pasos:
- 🔍 Identifica el contenedor donde se encuentran los elementos que quieres modificar.
- 🎯 Localiza el selector CSS correspondiente a cada elemento de la lista.
- 🔢 Decide cuántos elementos finales quieres seleccionar.
- ✏️ Utiliza el selector
:nth-last-child(-n + X)sustituyendo X por la cantidad deseada. - 🎨 Añade dentro del selector las propiedades CSS que quieras aplicar.
- 🧪 Comprueba el resultado utilizando las herramientas para desarrolladores del navegador.
- 📱 Revisa también el resultado en diferentes resoluciones si estás trabajando con un diseño responsive.
Ejemplo práctico seleccionando los tres últimos elementos
Supongamos que tienes una tienda donde aparecen varios productos dentro de una cuadrícula:
<div class="productos">
<div>Producto 1</div>
<div>Producto 2</div>
<div>Producto 3</div>
<div>Producto 4</div>
<div>Producto 5</div>
<div>Producto 6</div>
</div>
Si quieres destacar los tres últimos productos puedes escribir:
.productos > div:nth-last-child(-n + 3) {
border: 2px solid;
}
Con independencia del número de productos que tenga la cuadrícula, CSS seleccionará siempre los tres últimos elementos existentes.
🚀 Esta característica resulta especialmente interesante cuando el contenido es dinámico y puede aumentar o disminuir constantemente.
Diferencia entre :nth-child() y :nth-last-child()
Aunque sus nombres son muy parecidos, existe una diferencia fundamental entre ambos selectores.
:nth-child() comienza a contar desde el primer elemento, mientras que :nth-last-child() comienza a hacerlo desde el último.
Por ejemplo:
.lista li:nth-child(2) {
font-weight: bold;
}
Selecciona el segundo elemento desde el principio.
Mientras que:
.lista li:nth-last-child(2) {
font-weight: bold;
}
Selecciona el segundo elemento desde el final.
Esta diferencia convierte a :nth-last-child() en uno de los selectores más cómodos cuando quieres trabajar específicamente con los últimos elementos de un contenedor.
Diferencia entre :nth-last-child() y :nth-last-of-type()
También existe la pseudoclase :nth-last-of-type(), cuyo funcionamiento puede parecer idéntico pero presenta una diferencia importante.
:nth-last-child() tiene en cuenta la posición del elemento entre todos los hijos del mismo contenedor, mientras que :nth-last-of-type() cuenta únicamente los elementos del mismo tipo HTML.
Por ejemplo:
.contenedor p:nth-last-of-type(2) {
font-weight: bold;
}
Este selector seleccionará el penúltimo párrafo <p>, aunque existan otros elementos como títulos, imágenes o botones entre ellos.
Puedes consultar más detalles sobre estas pseudoclases en la documentación de MDN Web Docs sobre :nth-last-child().
Tabla resumen de selectores
| Objetivo | Selector CSS | Resultado |
|---|---|---|
| Seleccionar el último elemento | li:last-child | Último elemento |
| Seleccionar el penúltimo | li:nth-last-child(2) | Segundo desde el final |
| Seleccionar los 2 últimos | li:nth-last-child(-n + 2) | Dos elementos finales |
| Seleccionar los 3 últimos | li:nth-last-child(-n + 3) | Tres elementos finales |
| Seleccionar los 4 últimos | li:nth-last-child(-n + 4) | Cuatro elementos finales |
| Seleccionar los 5 últimos | li:nth-last-child(-n + 5) | Cinco elementos finales |
| Seleccionar el último de un tipo | p:last-of-type | Último elemento de ese tipo |
| Seleccionar varios desde el final por tipo | p:nth-last-of-type(-n + 3) | Tres últimos del mismo tipo |
Usar estos selectores en diseños responsive
Una de las aplicaciones más interesantes de :nth-last-child() aparece cuando trabajas con media queries y diseños adaptables.
Imagina que quieres ocultar los tres últimos elementos de un menú en pantallas pequeñas:
@media (max-width: 600px) {
.menu li:nth-last-child(-n + 3) {
display: none;
}
}
📱 De esta manera puedes modificar automáticamente los elementos finales cuando el espacio disponible se reduce.
También puedes combinar esta técnica con CSS Grid o Flexbox para solucionar pequeños detalles visuales sin modificar la estructura HTML.
Si quieres profundizar en las posibilidades de los selectores modernos, puedes consultar la documentación sobre selectores CSS de MDN.
Errores frecuentes al utilizar :nth-last-child()
Uno de los errores más frecuentes consiste en confundir :nth-child() con :nth-last-child(), provocando que CSS seleccione elementos desde el extremo contrario al que esperabas.
También debes prestar atención a los diferentes elementos que pueda contener el padre porque :nth-last-child() evalúa la posición real entre los hijos.
Si necesitas contar exclusivamente etiquetas del mismo tipo, probablemente resulte más apropiado utilizar :nth-last-of-type().
⚠️ También es recomendable evitar selectores excesivamente específicos, ya que después pueden complicarte la tarea de sobrescribir estilos en otras partes de tu hoja CSS.
Puedes encontrar información adicional sobre la especificación de selectores en la documentación del World Wide Web Consortium.
¿Cuándo merece la pena utilizar :nth-last-child()?
Deberías utilizar :nth-last-child() cuando quieras seleccionar elementos teniendo en cuenta su posición desde el final y no quieras depender de clases adicionales.
Resulta especialmente útil en menús dinámicos, listados de WordPress, productos de WooCommerce, galerías, tablas, tarjetas y cuadrículas CSS.
Además, al tratarse de una solución exclusivamente basada en CSS, puedes evitar utilizar JavaScript innecesariamente para realizar cambios puramente visuales.
✨ Una vez recuerdes la fórmula :nth-last-child(-n + X), podrás seleccionar fácilmente cualquier cantidad de elementos finales dentro de tus diseños.
Conclusión
Seleccionar los últimos elementos de una lista con CSS es mucho más sencillo cuando conoces las posibilidades de :last-child y :nth-last-child().
Para un único elemento puedes utilizar :last-child, mientras que para seleccionar varios elementos finales puedes recurrir a :nth-last-child(-n + X).
Esta técnica te permite crear estilos más flexibles, mantener un HTML más limpio y controlar contenido dinámico sin añadir clases adicionales.
🚀 Incorporar estos selectores a tus recursos habituales de CSS te permitirá resolver rápidamente numerosos ajustes de diseño que, a primera vista, podrían parecer bastante más complicados.
