Si trabajas habitualmente con hojas de estilo, aprender a combinar :not() y :first-child en CSS te permitirá seleccionar elementos de forma mucho más precisa sin recurrir a clases adicionales ni modificar el HTML.
Estos dos selectores forman parte de las pseudoclases de CSS y, utilizados conjuntamente, permiten excluir determinados elementos mientras aplicas estilos únicamente a los que cumplen unas condiciones concretas.
En este tutorial vas a aprender cómo funciona :not(), cómo funciona :first-child, cómo combinarlos correctamente y cuáles son los errores más frecuentes que debes evitar.
Además, veremos varios ejemplos prácticos que podrás adaptar fácilmente a tus propios proyectos web.
¿Qué es :first-child en CSS? 🎯
La pseudoclase :first-child permite seleccionar un elemento cuando es el primer hijo de su elemento padre.
Por ejemplo, puedes utilizarla para modificar únicamente el primer elemento de una lista.
li:first-child {
font-weight: bold;
}
Con este código, solamente el primer elemento <li> de cada lista aparecerá en negrita.
Puedes encontrar información adicional sobre esta pseudoclase en la documentación de :first-child de MDN.
Este selector resulta especialmente útil cuando quieres crear diseños en los que el primer elemento tenga un comportamiento diferente al resto.
¿Qué es :not() en CSS? 🚫
La pseudoclase :not() sirve para excluir de una selección aquellos elementos que coincidan con el selector indicado entre paréntesis.
Por ejemplo, imagina que tienes varios botones y quieres aplicar determinado estilo a todos excepto a los que tengan la clase .principal.
button:not(.principal) {
opacity: 0.8;
}
En este caso, todos los botones excepto el botón con la clase .principal tendrán una opacidad del 80 %.
La pseudoclase :not() es conocida como una pseudoclase de negación porque permite definir qué elementos no deben formar parte de una selección.
Puedes consultar más detalles sobre su sintaxis en la documentación oficial de :not() en MDN.
Cómo combinar :not() y :first-child en CSS 🔗
Una de las combinaciones más interesantes consiste en utilizar :not(:first-child) para seleccionar todos los elementos excepto el primero.
La sintaxis básica es extremadamente sencilla.
elemento:not(:first-child) {
propiedad: valor;
}
Con esta estructura estás diciendo al navegador que aplique determinadas propiedades a todos los elementos que no sean el primer hijo de su padre.
Por ejemplo:
li:not(:first-child) {
margin-top: 15px;
}
Este código añade un margen superior de 15px a todos los elementos de una lista excepto al primero.
Esta técnica resulta especialmente práctica porque evita tener que eliminar posteriormente el margen del primer elemento utilizando otra regla CSS.
Ejemplo práctico con una lista 📋
Imagina que tienes el siguiente código HTML.
<ul class="menu">
<li>Inicio</li>
<li>Servicios</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
Si quieres añadir una línea superior a todos los elementos excepto al primero, puedes utilizar el siguiente selector.
.menu li:not(:first-child) {
border-top: 1px solid #ddd;
}
El resultado será que Servicios, Blog y Contacto tendrán un borde superior, mientras que Inicio permanecerá sin él.
Esta solución suele ser más limpia que aplicar el borde a todos los elementos y después eliminarlo mediante otra regla.
Añadir separación excepto al primer elemento 📏
Otro uso muy frecuente consiste en controlar el espaciado entre elementos consecutivos.
Puedes hacerlo de esta manera:
.card:not(:first-child) {
margin-top: 30px;
}
Gracias a esta regla, cada tarjeta tendrá 30 píxeles de separación respecto a la anterior, pero la primera tarjeta no tendrá un margen innecesario en su parte superior.
Este patrón resulta muy útil en tarjetas, formularios, widgets, bloques de WordPress y diseños creados con Flexbox o Grid.
Cómo aplicar :not(:first-child) paso a paso 🛠️
Si quieres utilizar esta combinación en tu propio proyecto, puedes seguir estos pasos:
- Identifica los elementos repetidos a los que quieres aplicar un estilo.
- Comprueba cuál es el elemento padre que contiene esos elementos.
- Escribe el selector correspondiente al elemento que quieres modificar.
- Añade
:not(:first-child)inmediatamente después del selector. - Introduce dentro de la regla las propiedades CSS que quieras aplicar.
- Comprueba el resultado utilizando las herramientas para desarrolladores del navegador.
Un ejemplo completo podría ser:
.contenedor .elemento:not(:first-child) {
margin-top: 20px;
}
De esta forma, todos los elementos con la clase .elemento, excepto aquellos que sean el primer hijo de .contenedor, recibirán el margen indicado.
Diferencia entre :not(:first-child) y :not(:first-of-type) ⚠️
Uno de los errores más frecuentes consiste en confundir :first-child con :first-of-type, aunque ambos selectores tienen comportamientos diferentes.
:first-child comprueba si el elemento es literalmente el primer hijo de su padre, independientemente del tipo de etiqueta.
Por el contrario, :first-of-type selecciona el primer elemento de un determinado tipo dentro del padre.
Observa este HTML:
<div class="contenedor">
<h2>Título</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</div>
Si utilizas:
p:not(:first-child) {
color: red;
}
Los dos párrafos podrían verse afectados porque ninguno de ellos es el primer hijo del <div>, ya que el primer hijo es el <h2>.
En cambio, utilizando:
p:not(:first-of-type) {
color: red;
}
Solamente se seleccionará el segundo párrafo, ya que el primero sí es el primer elemento <p> de ese contenedor.
Comprender esta diferencia es fundamental cuando trabajas con estructuras HTML que contienen diferentes tipos de etiquetas.
Usar :not() con varios selectores 🎛️
CSS moderno permite incluir varios selectores dentro de :not(), lo que abre todavía más posibilidades.
Por ejemplo:
li:not(:first-child, .destacado) {
opacity: 0.7;
}
En este caso se seleccionarán los elementos <li> que no sean el primer hijo y tampoco tengan la clase .destacado.
Esta posibilidad permite reducir considerablemente la cantidad de reglas CSS necesarias en diseños complejos.
Puedes consultar otras técnicas avanzadas de selección en la guía de selectores CSS de MDN.
Combinar :not() y :first-child con clases 🧩
También puedes limitar la regla a una determinada clase para conseguir una selección todavía más específica.
Por ejemplo:
.producto:not(:first-child) {
padding-top: 25px;
}
Esta regla solamente afectará a los elementos que tengan la clase .producto y que no sean el primer hijo de su elemento padre.
También puedes utilizar selectores descendientes:
.productos .producto:not(:first-child) {
border-top: 1px solid #eee;
}
De esta manera puedes aplicar estilos únicamente a los productos situados dentro de .productos, evitando afectar a elementos similares presentes en otras partes de la página.
Aplicarlo a menús de navegación 🧭
Los menús son otro escenario perfecto para utilizar :not(:first-child).
Puedes añadir una separación entre enlaces sin afectar al primero:
nav a:not(:first-child) {
margin-left: 20px;
}
Esta técnica permite crear espacios uniformes entre los enlaces de navegación sin añadir un margen innecesario al comienzo del menú.
Aunque actualmente también puedes conseguir muchos de estos diseños utilizando la propiedad gap, conocer esta combinación continúa siendo útil para estructuras antiguas o situaciones donde necesitas mayor control sobre cada elemento.
Errores habituales al combinar :not() y :first-child ❌
El principal error consiste en asumir que :first-child significa “el primer elemento de este tipo”, cuando realmente significa que el elemento debe ser el primer hijo absoluto del contenedor.
También debes comprobar que el selector situado antes de :not() sea suficientemente específico, especialmente cuando tu proyecto contiene reglas CSS procedentes de plugins, temas o frameworks.
Otro problema habitual aparece cuando existen elementos inesperados dentro del contenedor, ya que un encabezado, una imagen o cualquier otra etiqueta puede hacer que el elemento que considerabas primero deje de coincidir con :first-child.
Utilizar las herramientas de inspección de Chrome, Firefox o Edge te permitirá comprobar rápidamente qué selectores están actuando sobre cada elemento.
Tabla resumen de :not() y :first-child 📊
| Selector | Qué selecciona | Ejemplo de uso |
|---|---|---|
:first-child | El primer hijo del elemento padre | Destacar el primer elemento |
:not() | Elementos que no cumplen una condición | Excluir una clase |
:not(:first-child) | Todos excepto el primer hijo | Añadir separación |
:not(:first-of-type) | Todos excepto el primero de su tipo | Estilizar párrafos |
.item:not(:first-child) | Elementos .item excepto el primer hijo | Separar tarjetas |
li:not(:first-child, .activo) | Excluye el primero y los elementos .activo | Personalizar menús |
Cuándo deberías utilizar :not(:first-child) 💡
Esta combinación es especialmente recomendable cuando quieres aplicar estilos repetitivos evitando modificar el primer elemento.
Puedes utilizarla para añadir márgenes, bordes, separadores, rellenos, colores, fondos o pequeñas modificaciones visuales entre elementos repetidos.
También resulta útil cuando trabajas con contenido generado dinámicamente por WordPress, WooCommerce o cualquier otro CMS, donde añadir clases manualmente a cada elemento puede resultar poco práctico.
El selector mantiene el código bastante limpio porque evita crear reglas adicionales únicamente para corregir el estilo del primer elemento.
Conclusión ✅
Aprender cómo combinar :not() y :first-child en CSS te proporciona una forma sencilla y elegante de controlar qué elementos deben recibir determinados estilos.
La estructura elemento:not(:first-child) te permite seleccionar todos los elementos excepto el primero, algo especialmente útil para gestionar márgenes, bordes y separaciones.
Antes de utilizarla, recuerda comprobar siempre la estructura real del HTML, porque :first-child depende directamente de la posición que ocupa el elemento dentro de su padre.
Si necesitas seleccionar el primer elemento de un tipo específico y no necesariamente el primer hijo absoluto, probablemente te interese utilizar :first-of-type junto con :not().
Dominar estas pequeñas combinaciones de selectores hará que puedas escribir un CSS más preciso, flexible y fácil de mantener, reduciendo al mismo tiempo la necesidad de añadir clases innecesarias al HTML.
