Cuando trabajas con una lista, un menú, varias tarjetas o cualquier grupo de elementos HTML, es bastante habitual que necesites aplicar un estilo a todos los elementos excepto al primero.
CSS permite resolver este problema de varias maneras, aunque una de las más claras consiste en combinar las pseudoclases :not() y :first-child.
Con estos selectores puedes evitar añadir clases adicionales al HTML y mantener tus estilos más limpios, reutilizables y fáciles de mantener.
En este tutorial vas a aprender cómo seleccionar todos los elementos excepto el primero con CSS, qué alternativas existen y en qué situaciones conviene utilizar cada una.
🎯 Seleccionar todos los elementos excepto el primero con :not()
La forma más intuitiva de excluir el primer elemento consiste en utilizar la pseudoclase :not() junto con :first-child.
El código básico sería el siguiente:
.elemento:not(:first-child) {
color: red;
}
Este selector indica al navegador que debe localizar los elementos con la clase .elemento que no sean el primer hijo de su elemento padre.
Por ejemplo, puedes tener esta estructura HTML:
<div class="contenedor">
<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>
Si aplicas el CSS anterior, el primer elemento conservará su apariencia original, mientras que los otros tres aparecerán con el texto de color rojo.
La pseudoclase :not() permite precisamente excluir determinados elementos de un selector CSS.
🔍 Cómo funciona :first-child
Para entender correctamente este método necesitas conocer el funcionamiento de :first-child.
La pseudoclase :first-child selecciona un elemento cuando este ocupa la primera posición entre todos los hijos de su elemento padre.
Por ejemplo:
.elemento:first-child {
font-weight: bold;
}
En este caso únicamente se seleccionaría el primer .elemento, siempre que realmente sea el primer hijo dentro del contenedor.
Cuando introduces este selector dentro de :not(), simplemente estás invirtiendo la condición.
.elemento:not(:first-child) {
font-weight: bold;
}
Ahora CSS seleccionará todos los elementos que no sean el primero.
🛠️ Cómo aplicarlo paso a paso
Si quieres utilizar esta técnica en tu propia página web, puedes seguir estos pasos:
- 🔎 Identifica el selector común de los elementos que quieres modificar.
- 🧱 Comprueba que todos esos elementos se encuentran dentro del mismo elemento padre.
- ✏️ Añade
:not(:first-child)después del selector que quieres utilizar. - 🎨 Introduce dentro de las llaves las propiedades CSS que quieres aplicar.
- 👀 Revisa el resultado y comprueba que el primer elemento queda excluido correctamente.
Por ejemplo, para añadir un margen superior a todos los elementos excepto al primero puedes utilizar:
.elemento:not(:first-child) {
margin-top: 20px;
}
Esta técnica resulta especialmente útil cuando quieres generar separaciones entre elementos sin añadir espacio innecesario antes del primero.
📏 Añadir bordes excepto al primer elemento
Otro caso bastante frecuente aparece cuando quieres colocar líneas divisorias entre diferentes elementos.
Puedes hacerlo de esta manera:
.elemento:not(:first-child) {
border-top: 1px solid #ddd;
}
El primer elemento no tendrá borde superior, mientras que todos los siguientes mostrarán una línea de separación.
Este recurso funciona muy bien en menús, listas de enlaces, widgets, acordeones o bloques de contenido.
📋 Ejemplo con una lista HTML
Imagina que tienes la siguiente lista:
<ul class="lista">
<li>Inicio</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
Si quieres cambiar el color de todos los elementos menos el primero puedes escribir:
.lista li:not(:first-child) {
color: #777;
}
El resultado será que Inicio quedará excluido de la regla mientras que Servicios, Portfolio y Contacto recibirán el nuevo color.
Gracias a los selectores CSS puedes crear reglas muy precisas sin necesidad de modificar continuamente el código HTML.
⚡ Alternativa usando :first-child y el combinador ~
Otra posibilidad consiste en seleccionar los elementos situados después del primero mediante el combinador general de hermanos ~.
Puedes escribir algo como:
.elemento:first-child ~ .elemento {
color: red;
}
Este selector localiza el primer .elemento y después selecciona todos sus hermanos posteriores que también tengan la clase .elemento.
El resultado puede ser prácticamente idéntico al conseguido mediante :not(:first-child).
Esta alternativa resulta interesante cuando quieres expresar explícitamente que los estilos deben comenzar después de un determinado elemento inicial.
➕ Alternativa usando el combinador +
También puedes utilizar el combinador de hermanos adyacentes + cuando los elementos aparecen consecutivamente.
Por ejemplo:
.elemento + .elemento {
margin-top: 20px;
}
Esta regla selecciona cualquier .elemento que tenga otro .elemento inmediatamente antes.
Como el primer elemento no tiene ningún .elemento anterior, queda automáticamente fuera de la selección.
Esta solución es especialmente elegante para aplicar márgenes entre elementos repetidos.
Por ejemplo, es muy habitual encontrar patrones similares en sistemas de diseño:
.tarjeta + .tarjeta {
margin-top: 30px;
}
De esta manera el margen únicamente aparece entre las tarjetas, evitando crear espacio adicional antes de la primera.
⚠️ Cuidado con :first-child
Uno de los errores más habituales aparece cuando utilizas :first-child pensando que significa “el primer elemento que tenga esta clase”.
En realidad, :first-child significa que el elemento debe ser literalmente el primer hijo de su contenedor.
Observa este ejemplo:
<div class="contenedor">
<h2>Título</h2>
<div class="elemento">Elemento 1</div>
<div class="elemento">Elemento 2</div>
</div>
Si utilizas:
.elemento:not(:first-child) {
color: red;
}
Los dos .elemento serán seleccionados porque ninguno de ellos es el primer hijo del contenedor, ya que esa posición pertenece al <h2>.
Este pequeño detalle puede provocar resultados inesperados si la estructura HTML incluye títulos, imágenes, iconos u otros elementos antes del contenido que quieres seleccionar.
🧩 Usar :first-of-type como alternativa
Cuando existen otros elementos dentro del contenedor puede resultarte útil la pseudoclase :first-of-type.
Por ejemplo:
p:not(:first-of-type) {
margin-top: 20px;
}
Esta regla selecciona todos los párrafos excepto el primer elemento <p> de su tipo.
La diferencia es importante porque :first-of-type tiene en cuenta el tipo de etiqueta HTML, mientras que :first-child comprueba exclusivamente la posición.
Si trabajas con varios tipos de etiquetas dentro del mismo contenedor, esta alternativa puede ofrecerte un comportamiento más predecible.
🧪 Ejemplo práctico con tarjetas
Supón que tienes varias tarjetas dentro de una columna:
<div class="tarjetas">
<article class="tarjeta">Tarjeta 1</article>
<article class="tarjeta">Tarjeta 2</article>
<article class="tarjeta">Tarjeta 3</article>
</div>
Para dejar un espacio entre ellas puedes utilizar:
.tarjeta:not(:first-child) {
margin-top: 25px;
}
El primer artículo permanecerá pegado al comienzo del contenedor mientras que los siguientes tendrán 25 píxeles de separación superior.
También podrías conseguir el mismo resultado mediante:
.tarjeta + .tarjeta {
margin-top: 25px;
}
Para este caso concreto, la segunda opción suele ser especialmente cómoda porque expresa directamente la idea de añadir espacio entre elementos consecutivos.
📊 Tabla resumen de selectores
| Selector | Qué selecciona | Cuándo utilizarlo |
|---|---|---|
.elemento:not(:first-child) | Todos excepto el primer hijo | Cuando los elementos son hijos directos del mismo contenedor |
.elemento:first-child ~ .elemento | Todos los hermanos posteriores al primero | Cuando quieres partir explícitamente del primer elemento |
.elemento + .elemento | Elementos que tienen otro igual justo antes | Ideal para márgenes y separaciones entre elementos |
p:not(:first-of-type) | Todos los elementos de ese tipo salvo el primero | Cuando existen diferentes etiquetas dentro del contenedor |
.elemento:first-child | Solo el primer elemento | Cuando necesitas aplicar estilos exclusivamente al primero |
💡 ¿Qué selector deberías utilizar?
En la mayoría de situaciones, .elemento:not(:first-child) es probablemente la opción más fácil de entender cuando quieres excluir expresamente el primer hijo.
Si únicamente quieres crear separaciones entre elementos repetidos, el selector .elemento + .elemento suele producir un CSS especialmente limpio.
Cuando tu contenedor incluye diferentes tipos de etiquetas, conviene revisar la estructura porque :first-child puede no comportarse como esperabas.
En determinadas estructuras, :first-of-type puede ser una alternativa más apropiada, aunque debes recordar que funciona en función de la etiqueta HTML y no de la clase CSS.
🚀 Ejemplos rápidos que puedes reutilizar
Para añadir margen a todos excepto al primero:
.elemento:not(:first-child) {
margin-top: 20px;
}
Para añadir un borde a todos excepto al primero:
.elemento:not(:first-child) {
border-top: 1px solid #ddd;
}
Para cambiar el color de todos excepto al primero:
.elemento:not(:first-child) {
color: #666;
}
Para modificar todos los botones excepto el primero:
.botones button:not(:first-child) {
margin-left: 10px;
}
Para separar elementos consecutivos sin afectar al primero:
.elemento + .elemento {
margin-top: 20px;
}
Estos patrones pueden ahorrarte bastantes clases adicionales y ayudarte a construir un CSS más compacto y semántico.
✅ Conclusión
Seleccionar todos los elementos excepto el primero con CSS es sencillo cuando conoces las pseudoclases y combinadores adecuados.
La combinación :not(:first-child) suele ser la solución más directa porque describe con bastante claridad exactamente qué elementos quieres excluir.
Sin embargo, selectores como +, ~ o :first-of-type pueden resultar incluso más apropiados dependiendo de la estructura de tu HTML.
Antes de elegir una opción conviene comprobar qué elemento ocupa realmente la primera posición dentro del contenedor, ya que :first-child analiza la estructura del documento y no simplemente el orden de una determinada clase.
Con estos selectores podrás crear listas, menús, tarjetas y bloques con espaciados, bordes y estilos mucho más precisos, evitando añadir clases innecesarias únicamente para modificar el primer elemento.
