Cuando estás diseñando una página web, es bastante habitual que necesites aplicar un estilo a varios elementos pero quieras excluir el último elemento de una lista, menú, conjunto de tarjetas o cualquier otro grupo repetitivo.
CSS permite hacerlo de una forma muy sencilla utilizando principalmente la pseudoclase :not() combinada con :last-child, aunque también existen otras alternativas que pueden resultar útiles dependiendo de la estructura de tu HTML.
En este tutorial vas a aprender cómo seleccionar todos los elementos excepto el último con CSS, cuándo utilizar cada método y qué errores deberías evitar para conseguir un código limpio y fácil de mantener.
🎯 La forma más sencilla: :not(:last-child)
La solución más habitual consiste en utilizar el selector :not(:last-child), que selecciona todos los elementos que no sean el último hijo de su elemento contenedor.
El código básico sería el siguiente:
.elemento:not(:last-child) {
margin-bottom: 20px;
}
Con esta regla estás indicando al navegador que aplique un margen inferior de 20 píxeles a todos los elementos con la clase .elemento excepto al último.
Por ejemplo, podrías tener esta estructura HTML:
<div class="lista">
<div class="elemento">Elemento 1</div>
<div class="elemento">Elemento 2</div>
<div class="elemento">Elemento 3</div>
<div class="elemento">Elemento 4</div>
</div>
En este caso, los tres primeros elementos tendrán el margen inferior mientras que el cuarto elemento quedará excluido automáticamente.
Esta técnica es especialmente útil porque no necesitas añadir clases adicionales al último elemento ni modificar el HTML cada vez que añadas nuevos contenidos.
🔎 ¿Qué significa :not() en CSS?
La pseudoclase :not() funciona como un selector de exclusión y permite aplicar estilos a todos los elementos que no coincidan con una determinada condición.
Puedes encontrar una explicación más detallada sobre su funcionamiento en la documentación de MDN sobre :not().
Un ejemplo muy sencillo sería:
p:not(.destacado) {
color: #333;
}
Esta regla seleccionaría todos los párrafos excepto aquellos que tengan asignada la clase .destacado.
Cuando combinas :not() con :last-child, estás diciendo literalmente que quieres seleccionar los elementos que no sean el último hijo.
.elemento:not(:last-child) {
/* Estilos */
}
Esta combinación es una de las soluciones más cómodas para trabajar con elementos repetidos dentro de un mismo contenedor.
🧩 ¿Qué hace :last-child?
La pseudoclase :last-child permite seleccionar un elemento únicamente cuando ocupa la última posición dentro de su elemento padre.
Puedes consultar más detalles sobre esta pseudoclase en la documentación de MDN sobre :last-child.
Por ejemplo, con este CSS:
li:last-child {
font-weight: bold;
}
Estarías seleccionando únicamente el último <li> de una lista.
Sin embargo, como nuestro objetivo es hacer justamente lo contrario, podemos combinarlo con :not():
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
De esta manera todos los elementos de la lista tendrán una línea inferior excepto el último elemento.
🛠️ Cómo seleccionar todos los elementos excepto el último paso a paso
Si quieres aplicar este método correctamente en tu página web, puedes seguir estos pasos:
- Identifica el contenedor que incluye los elementos repetitivos sobre los que quieres trabajar.
- Comprueba qué selector comparten todos esos elementos, como una clase, una etiqueta HTML o un selector más específico.
- Añade la pseudoclase
:not(:last-child)después del selector correspondiente. - Introduce dentro de la regla CSS las propiedades que quieras aplicar.
- Guarda los cambios y comprueba el resultado en el navegador.
- Utiliza las herramientas para desarrolladores del navegador si necesitas verificar qué elementos están siendo seleccionados.
El resultado podría ser tan sencillo como este:
.tarjeta:not(:last-child) {
margin-bottom: 30px;
}
Con apenas unas líneas puedes evitar tener que crear reglas especiales para eliminar manualmente los estilos del último elemento.
📋 Tabla resumen de selectores
| Selector CSS | Qué selecciona | Uso habitual |
|---|---|---|
.elemento:last-child | Solo el último elemento | Aplicar estilos especiales al último |
.elemento:not(:last-child) | Todos excepto el último | Márgenes, bordes y separaciones |
.elemento:first-child | Solo el primer elemento | Personalizar el inicio de una lista |
.elemento:not(:first-child) | Todos excepto el primero | Separaciones o estilos secundarios |
.elemento:last-of-type | Último elemento de ese tipo | Estructuras HTML con elementos diferentes |
.elemento:not(:last-of-type) | Todos excepto el último de ese tipo | Listas con contenido intercalado |
📏 Eliminar el margen del último elemento
Uno de los usos más habituales de esta técnica aparece cuando necesitas añadir espacio vertical entre elementos.
Imagina que tienes varios bloques dentro de una página:
.bloque {
margin-bottom: 25px;
}
El problema es que el último bloque también tendrá esos 25 píxeles de margen, provocando en determinadas situaciones un espacio innecesario al final del contenedor.
Puedes solucionarlo directamente así:
.bloque:not(:last-child) {
margin-bottom: 25px;
}
Ahora solamente existirán márgenes entre los diferentes bloques, obteniendo una estructura visual mucho más coherente.
➖ Añadir separadores excepto al último elemento
Otro caso muy habitual aparece cuando quieres colocar líneas divisorias entre los elementos de una lista.
Podrías utilizar:
.lista li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
Gracias a esta regla tendrás una línea debajo de cada elemento excepto debajo del último, evitando ese borde sobrante al final de la lista.
Este tipo de CSS resulta especialmente útil en menús, widgets, listas de categorías, comentarios, bloques de noticias o listados creados dinámicamente desde WordPress.
🧭 Utilizarlo en un menú de navegación
También puedes utilizar este selector para crear separaciones entre los enlaces de un menú horizontal.
Por ejemplo:
.menu li:not(:last-child) {
margin-right: 20px;
}
Todos los elementos tendrán espacio a su derecha excepto el último, consiguiendo que el menú quede correctamente alineado dentro de su contenedor.
Esta solución resulta especialmente práctica porque seguirá funcionando aunque posteriormente añadas o elimines elementos del menú.
⚠️ Cuidado con :last-child y la estructura HTML
Uno de los errores más frecuentes aparece cuando :last-child no funciona como esperabas porque el elemento que quieres excluir realmente no es el último hijo del contenedor.
Imagina esta estructura:
<div class="contenedor">
<div class="elemento">Uno</div>
<div class="elemento">Dos</div>
<p>Otro contenido</p>
</div>
Si utilizas:
.elemento:not(:last-child) {
margin-bottom: 20px;
}
Los dos elementos .elemento cumplirán la condición porque ninguno de ellos es realmente el último hijo del contenedor, ya que el último hijo es el párrafo <p>.
Por este motivo conviene revisar siempre la estructura HTML antes de pensar que el selector CSS está funcionando incorrectamente.
🔄 Alternativa utilizando :last-of-type
Cuando dentro del mismo contenedor existen diferentes tipos de etiquetas, puede resultar más conveniente utilizar :last-of-type.
Por ejemplo:
p:not(:last-of-type) {
margin-bottom: 20px;
}
Esta regla seleccionará todos los párrafos excepto el último párrafo existente dentro del mismo elemento padre.
La diferencia es importante porque :last-child analiza la posición del elemento entre todos los hijos, mientras que :last-of-type analiza su posición únicamente respecto a los elementos de su mismo tipo.
Puedes consultar las diferencias y compatibilidad de estos selectores en la referencia de selectores CSS de MDN.
💡 Otra opción: aplicar el estilo a todos y eliminarlo del último
También puedes conseguir prácticamente el mismo resultado aplicando primero un estilo general y sobrescribiéndolo posteriormente sobre el último elemento.
.elemento {
margin-bottom: 20px;
}
.elemento:last-child {
margin-bottom: 0;
}
Este sistema funciona perfectamente, pero necesita dos reglas CSS en lugar de una.
En muchas situaciones utilizar :not(:last-child) genera un código algo más compacto:
.elemento:not(:last-child) {
margin-bottom: 20px;
}
No obstante, ambas soluciones son válidas y puedes elegir la que resulte más clara dentro de tu hoja de estilos.
🚀 Compatibilidad con navegadores
Las pseudoclases :not() y :last-child cuentan con una compatibilidad excelente en los navegadores modernos, por lo que puedes utilizarlas con tranquilidad en prácticamente cualquier proyecto actual.
Chrome, Firefox, Safari, Edge y los principales navegadores móviles llevan años ofreciendo soporte para estos selectores.
Esto convierte :not(:last-child) en una solución mucho más recomendable que recurrir a JavaScript para realizar una tarea puramente visual.
✅ Cuándo utilizar este selector
El selector :not(:last-child) resulta especialmente práctico cuando necesitas trabajar con listas o elementos repetitivos cuyo número puede cambiar con el tiempo.
Puedes utilizarlo, por ejemplo, para:
- Añadir márgenes entre elementos sin dejar espacio extra al final.
- Crear líneas divisorias entre elementos de una lista.
- Separar enlaces dentro de menús de navegación.
- Aplicar estilos a varias tarjetas o columnas.
- Personalizar listas generadas dinámicamente por WordPress.
- Crear separaciones entre productos, entradas o categorías.
- Evitar tener que añadir una clase específica al último elemento.
La principal ventaja es que el navegador determina automáticamente cuál es el último elemento, de manera que tu CSS seguirá funcionando aunque el contenido cambie dinámicamente.
🎨 Conclusión
Seleccionar todos los elementos excepto el último con CSS es muy sencillo gracias a la combinación :not(:last-child), uno de esos pequeños recursos que pueden ayudarte a escribir hojas de estilo mucho más limpias.
En la mayoría de los casos únicamente necesitarás utilizar una regla como .elemento:not(:last-child) y añadir dentro las propiedades que quieras aplicar.
Este selector resulta especialmente cómodo para gestionar márgenes, bordes, espacios y separadores sin necesidad de modificar manualmente el último elemento.
Si trabajas habitualmente con WordPress, maquetadores visuales o páginas creadas mediante bloques, dominar este tipo de selectores CSS te permitirá resolver rápidamente multitud de pequeños problemas de diseño.
