Cuando trabajas con CSS, es bastante habitual que necesites seleccionar un elemento dependiendo de la posición que ocupa dentro de su contenedor, pero contando desde el final en lugar de desde el principio.
CSS dispone de varias pseudoclases especialmente útiles para conseguirlo, entre las que destacan :nth-last-child() y :nth-last-of-type().
Gracias a estos selectores puedes modificar, por ejemplo, el último elemento, el penúltimo, el tercer elemento empezando por abajo o incluso grupos completos de elementos sin tener que añadir clases adicionales al HTML.
🎯 Dominar estos selectores puede ayudarte a escribir un CSS más limpio, flexible y reutilizable, especialmente cuando trabajas con listas, menús, tarjetas, productos, tablas o elementos generados dinámicamente.
Qué significa seleccionar un elemento desde el final
Normalmente, cuando utilizas selectores como :nth-child(), CSS empieza a contar los elementos desde el principio del contenedor.
Por ejemplo, :nth-child(2) seleccionaría el segundo hijo de un elemento.
Sin embargo, utilizando :nth-last-child(), el navegador realiza exactamente el proceso contrario y empieza a contar desde el último elemento.
Por ejemplo:
.elemento:nth-last-child(2) {
color: red;
}
Este código seleccionará el penúltimo elemento que coincida con .elemento, siempre que también ocupe la segunda posición contando desde el final dentro de su contenedor.
Esta posibilidad resulta especialmente práctica cuando no conoces de antemano cuántos elementos tendrá un bloque.
Cómo utilizar :nth-last-child() en CSS
La pseudoclase :nth-last-child() selecciona un elemento según su posición entre los hijos de su elemento padre, pero realizando el recuento desde el último hijo hacia el primero.
Su sintaxis básica es:
selector:nth-last-child(n) {
propiedad: valor;
}
El valor n representa la posición desde el final que quieres seleccionar.
Por ejemplo, puedes utilizar:
li:nth-last-child(3) {
font-weight: bold;
}
En este caso, CSS seleccionará el tercer elemento desde el final siempre que ese elemento sea un <li>.
📌 El detalle importante es que :nth-last-child() tiene en cuenta todos los elementos hijos, independientemente de su etiqueta HTML.
Cómo seleccionar el último elemento
Si solamente necesitas seleccionar el último elemento de un contenedor, normalmente puedes utilizar la pseudoclase :last-child.
li:last-child {
margin-bottom: 0;
}
Con este ejemplo puedes eliminar el margen inferior del último elemento de una lista.
También podrías conseguir prácticamente el mismo resultado utilizando:
li:nth-last-child(1) {
margin-bottom: 0;
}
Aunque ambas opciones funcionan, :last-child suele ser más fácil de leer cuando únicamente necesitas seleccionar el último elemento.
Cómo seleccionar el penúltimo elemento con CSS
Uno de los usos más interesantes de :nth-last-child() consiste en seleccionar el penúltimo elemento de una lista o contenedor.
Solo necesitas utilizar el número 2:
li:nth-last-child(2) {
color: #333;
}
CSS comenzará a contar desde abajo, por lo que el último elemento será el número 1 y el penúltimo será el número 2.
Este recurso puede resultar muy útil si quieres aplicar un diseño diferente a los elementos situados cerca del final de una lista.
Cómo seleccionar el tercer elemento desde el final
El funcionamiento es exactamente el mismo si quieres seleccionar el tercer elemento desde el final.
li:nth-last-child(3) {
background: #f5f5f5;
}
En este caso, el navegador contará tres posiciones hacia atrás desde el último hijo del contenedor.
Puedes sustituir el número 3 por cualquier posición que necesites.
Cómo seleccionar varios elementos desde el final
La pseudoclase :nth-last-child() no está limitada a seleccionar una única posición, ya que también admite fórmulas matemáticas.
Por ejemplo:
li:nth-last-child(-n+3) {
font-weight: bold;
}
Este selector permite seleccionar los tres últimos elementos del contenedor.
La expresión -n+3 genera las posiciones 3, 2 y 1, por lo que CSS termina seleccionando los elementos correspondientes a esas posiciones desde el final.
💡 Esta técnica resulta especialmente útil cuando quieres destacar automáticamente los últimos productos, artículos, tarjetas o elementos de una sección.
Cómo seleccionar todos los elementos excepto los últimos
También puedes realizar justamente la operación contraria y seleccionar todos los elementos excepto los situados al final.
Por ejemplo:
li:not(:nth-last-child(-n+2)) {
border-bottom: 1px solid #ddd;
}
Este código seleccionará todos los elementos <li> excepto los dos últimos.
La combinación de :not() con :nth-last-child() permite crear selectores CSS bastante precisos sin necesidad de modificar el HTML.
Diferencia entre :nth-last-child() y :nth-last-of-type()
Aunque sus nombres son similares, :nth-last-child() y :nth-last-of-type() no funcionan exactamente igual.
:nth-last-child() cuenta todos los hijos del contenedor independientemente del tipo de etiqueta.
En cambio, :nth-last-of-type() solo cuenta los elementos del mismo tipo HTML.
Imagina este código:
<div>
<p>Primer párrafo</p>
<span>Texto</span>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>
</div>
Si utilizas:
p:nth-last-of-type(2) {
color: red;
}
CSS buscará el segundo <p> contando desde el último párrafo, ignorando el <span>.
Esta diferencia resulta fundamental cuando dentro de un mismo contenedor tienes varios tipos de elementos HTML mezclados.
Tabla resumen de selectores desde el final
| Selector CSS | Qué selecciona | Ejemplo de uso |
|---|---|---|
:last-child | El último hijo | li:last-child |
:nth-last-child(1) | El último hijo | li:nth-last-child(1) |
:nth-last-child(2) | El penúltimo hijo | li:nth-last-child(2) |
:nth-last-child(3) | El tercer hijo desde el final | li:nth-last-child(3) |
:nth-last-child(-n+3) | Los tres últimos hijos | li:nth-last-child(-n+3) |
:nth-last-of-type(2) | El segundo elemento de ese tipo desde el final | p:nth-last-of-type(2) |
:not(:last-child) | Todos excepto el último | li:not(:last-child) |
:not(:nth-last-child(-n+2)) | Todos excepto los dos últimos | li:not(:nth-last-child(-n+2)) |
Ejemplo práctico con una lista
Supongamos que tienes una lista de enlaces y quieres eliminar el borde de los dos últimos elementos.
El HTML podría ser:
<ul class="menu">
<li>Inicio</li>
<li>Servicios</li>
<li>Blog</li>
<li>Contacto</li>
<li>Sobre nosotros</li>
</ul>
Puedes utilizar este CSS:
.menu li {
border-bottom: 1px solid #ddd;
}
.menu li:nth-last-child(-n+2) {
border-bottom: none;
}
De esta forma, Contacto y Sobre nosotros no tendrán borde inferior aunque posteriormente añadas nuevos elementos a la lista.
La ventaja es que el código seguirá funcionando automáticamente aunque cambie la cantidad total de elementos.
Cómo aplicar estos selectores paso a paso
Para utilizar correctamente los selectores que cuentan desde el final puedes seguir estas instrucciones:
- 🔎 Identifica el elemento padre que contiene los elementos que quieres seleccionar.
- 🎯 Determina la posición desde el final que quieres modificar, teniendo en cuenta que el último elemento ocupa la posición
1. - 🧩 Utiliza
:nth-last-child()cuando quieras contar todos los hijos del contenedor. - 🏷️ Utiliza
:nth-last-of-type()cuando solamente quieras contar elementos pertenecientes al mismo tipo de etiqueta HTML. - 🧮 Utiliza expresiones como
-n+3cuando quieras seleccionar varios elementos situados al final. - ✅ Comprueba el resultado con las herramientas de desarrollo del navegador antes de aplicar el código definitivamente en tu web.
Un ejemplo especialmente útil en WordPress
Estos selectores pueden ser particularmente útiles cuando estás trabajando con WordPress, porque muchos elementos son generados dinámicamente por plugins, temas o constructores visuales.
Por ejemplo, puedes querer eliminar el margen de las tres últimas tarjetas de una cuadrícula:
.tarjeta:nth-last-child(-n+3) {
margin-bottom: 0;
}
De esta forma no necesitas acceder al HTML ni añadir manualmente una clase diferente a cada tarjeta.
⚙️ Esta técnica puede utilizarse con prácticamente cualquier constructor visual, siempre que identifiques correctamente las clases CSS generadas por el tema o plugin.
Cuándo utilizar :nth-last-child()
**:nth-last-child() es una excelente solución cuando la posición de un elemento con respecto al final es más importante que su posición desde el principio**.
Por ejemplo, puede ayudarte a estilizar los últimos artículos de una lista, eliminar bordes, corregir márgenes, cambiar colores o modificar elementos situados al final de una cuadrícula.
También es especialmente útil cuando el número de elementos puede variar dinámicamente, ya que el selector seguirá contando automáticamente desde el último elemento disponible.
Compatibilidad de :nth-last-child()
La pseudoclase :nth-last-child() tiene una compatibilidad excelente con los navegadores modernos, por lo que puedes utilizarla tranquilamente en la inmensa mayoría de proyectos actuales.
Puedes consultar más información técnica sobre :nth-last-child() en MDN Web Docs para conocer todas las posibilidades que ofrece esta pseudoclase.
También puedes profundizar en el funcionamiento general de las pseudoclases CSS si quieres descubrir otros selectores capaces de simplificar considerablemente tu código.
Errores habituales al seleccionar elementos desde el final
Uno de los errores más habituales consiste en pensar que :nth-last-child() solamente tiene en cuenta elementos que coinciden con el selector situado delante, cuando realmente la posición se calcula teniendo en cuenta todos los hijos.
Si tienes diferentes etiquetas dentro del mismo contenedor, probablemente te interese utilizar :nth-last-of-type().
Otro error frecuente es olvidar que el recuento comienza en 1 y no en 0, por lo que :nth-last-child(1) corresponde al último elemento.
También conviene evitar selectores excesivamente largos o específicos, porque pueden complicar posteriormente el mantenimiento del CSS.
Conclusión
Aprender a utilizar :nth-last-child() te permite seleccionar fácilmente cualquier elemento según su posición contando desde el final del contenedor.
Puedes seleccionar el último, penúltimo, tercer elemento desde el final o incluso varios elementos simultáneamente utilizando números y pequeñas fórmulas.
Cuando solamente quieras contar etiquetas del mismo tipo, :nth-last-of-type() será normalmente la alternativa más apropiada.
🚀 Incorporar estas pseudoclases a tu CSS te permitirá reducir clases innecesarias, crear estilos más dinámicos y mantener un código mucho más ordenado, adaptable y fácil de modificar.
