Si necesitas aplicar estilos a determinados elementos de una página pero quieres excluir aquellos que tienen una clase concreta, CSS te permite hacerlo fácilmente gracias a la pseudoclase :not().
Este selector resulta especialmente útil cuando trabajas con WordPress, tiendas online, constructores visuales o páginas con muchos elementos repetidos, ya que puedes modificar grupos enteros sin tener que añadir nuevas clases al código HTML.
En este tutorial vas a aprender cómo seleccionar elementos que no tienen una clase con CSS, desde los ejemplos más sencillos hasta combinaciones algo más avanzadas que podrás utilizar directamente en tus proyectos.
Qué es la pseudoclase :not() de CSS 🚫
La pseudoclase :not() permite seleccionar cualquier elemento que no coincida con el selector indicado entre sus paréntesis.
La estructura básica es extremadamente sencilla:
elemento:not(.clase) {
propiedad: valor;
}
Con este código estás indicando al navegador que aplique los estilos a todos los elementos seleccionados excepto a aquellos que tengan la clase especificada.
Puedes consultar también la documentación de :not() en MDN Web Docs, donde encontrarás información técnica sobre esta pseudoclase.
Cómo seleccionar elementos que no tienen una clase con CSS 🎯
Imagina que tienes varios párrafos dentro de una página y uno de ellos contiene una clase llamada destacado.
<p>Primer párrafo</p>
<p class="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
Si quieres modificar todos los párrafos excepto el que tiene la clase destacado, puedes utilizar este CSS:
p:not(.destacado) {
color: #333;
}
El navegador aplicará el color solamente al primer y tercer párrafo, mientras que el elemento con la clase destacado quedará fuera de la selección.
Esta técnica evita tener que crear una clase adicional para cada uno de los elementos que quieres modificar.
Cómo usar :not() paso a paso 🛠️
Para seleccionar correctamente elementos que no contienen una determinada clase puedes seguir estos pasos:
- Identifica el elemento HTML sobre el que quieres aplicar los estilos, como
p,div,a,lio cualquier otra etiqueta. - Localiza la clase que quieres excluir comprobando el código HTML o utilizando las herramientas para desarrolladores del navegador.
- Escribe el selector principal seguido de
:not(). - Introduce dentro de los paréntesis la clase que quieres excluir, incluyendo el punto inicial.
- Añade dentro de las llaves las propiedades CSS que quieras aplicar al resto de elementos.
Por ejemplo:
div:not(.especial) {
padding: 20px;
}
Este código añadirá un espacio interior de 20 píxeles a todos los elementos div que no tengan la clase especial.
Seleccionar cualquier elemento que no tenga una clase concreta
No siempre necesitas especificar una etiqueta HTML concreta para utilizar :not().
También puedes recurrir al selector universal * para afectar potencialmente a cualquier elemento que no tenga determinada clase.
*:not(.ignorar) {
box-sizing: border-box;
}
Aunque esta posibilidad existe, debes utilizarla con prudencia porque el selector universal puede afectar a una gran cantidad de elementos de la página.
En la mayoría de situaciones es preferible escribir un selector más concreto para evitar modificaciones inesperadas.
Seleccionar elementos sin ninguna clase 🔎
Existe una diferencia importante entre seleccionar elementos que no tienen una clase específica y seleccionar elementos que no tienen ningún atributo class.
Si quieres seleccionar elementos que directamente no tengan el atributo class, puedes utilizar un selector de atributos combinado con :not():
div:not([class]) {
border: 1px solid;
}
Este código seleccionará únicamente los elementos div cuyo HTML no incluya ningún atributo class.
Por ejemplo:
<div>Seleccionado</div>
<div class="caja">No seleccionado</div>
Esta variante puede ser muy útil cuando necesitas distinguir entre elementos genéricos y elementos personalizados mediante clases.
Diferencia entre :not(.clase) y :not([class])
Aunque ambos selectores pueden parecer similares, en realidad tienen comportamientos completamente diferentes.
El selector:
div:not(.destacado)
selecciona todos los div que no tengan específicamente la clase destacado, aunque puedan tener cualquier otra clase.
En cambio:
div:not([class])
selecciona únicamente los div que no tengan ningún atributo class.
Por ejemplo, este elemento sí sería seleccionado por div:not(.destacado):
<div class="contenedor"></div>
Sin embargo, ese mismo elemento no sería seleccionado por div:not([class]) porque sí contiene un atributo class.
Tabla resumen de selectores CSS
| Selector | Qué selecciona | Ejemplo de uso |
|---|---|---|
p:not(.destacado) | Párrafos que no tienen la clase destacado | Excluir un párrafo especial |
div:not(.caja) | div que no tienen la clase caja | Aplicar estilos generales |
div:not([class]) | div que no tienen ninguna clase | Detectar elementos sin clases |
a:not(.boton) | Enlaces que no tienen la clase boton | Cambiar enlaces normales |
li:not(.activo) | Elementos de lista que no están activos | Estilizar opciones inactivas |
.menu a:not(.actual) | Enlaces del menú excepto el actual | Modificar navegación |
input:not(.especial) | Campos excepto los marcados como especiales | Personalizar formularios |
*:not(.ignorar) | Cualquier elemento excepto los que tengan ignorar | Regla global con exclusiones |
Cómo excluir varias clases con CSS ⚡
También puedes necesitar seleccionar elementos que no pertenezcan a varias clases distintas.
Una forma muy clara de hacerlo consiste en encadenar varias pseudoclases :not():
div:not(.destacado):not(.cabecera) {
margin-bottom: 20px;
}
Este selector afectará a los elementos div que no tengan la clase destacado y tampoco tengan la clase cabecera.
Los navegadores modernos también permiten incluir varios selectores dentro de una misma pseudoclase:
div:not(.destacado, .cabecera) {
margin-bottom: 20px;
}
Esta sintaxis resulta especialmente cómoda cuando necesitas excluir varias clases de una sola vez.
Puedes ampliar información sobre el funcionamiento de los selectores CSS en MDN.
Combinar :not() con clases CSS
Una de las grandes ventajas de :not() es que puedes combinarlo con selectores más específicos.
Supongamos que tienes numerosos botones:
<a class="boton">Comprar</a>
<a class="boton secundario">Más información</a>
<a class="boton">Contactar</a>
Si quieres seleccionar todos los elementos con la clase boton excepto los que también tengan secundario, puedes escribir:
.boton:not(.secundario) {
font-weight: bold;
}
De esta manera, el estilo solamente se aplicará a los botones que no tengan la clase secundaria.
Excluir una clase dentro de un contenedor 📦
También puedes limitar la selección a una parte concreta de la página utilizando selectores descendientes.
Por ejemplo:
.contenido p:not(.intro) {
margin-bottom: 25px;
}
Este código seleccionará todos los párrafos situados dentro de .contenido excepto aquellos que tengan la clase intro.
Esta forma de escribir CSS es muy útil en WordPress porque permite modificar determinadas zonas sin afectar al resto de la plantilla.
Seleccionar enlaces que no tienen una clase determinada 🔗
Un caso frecuente consiste en personalizar todos los enlaces de una zona excepto aquellos que funcionan como botones.
Puedes hacerlo así:
.contenido a:not(.boton) {
text-decoration: underline;
}
Todos los enlaces incluidos dentro de .contenido recibirán el subrayado salvo aquellos que tengan la clase boton.
Esta técnica te permite mantener estilos diferentes para enlaces normales y llamadas a la acción sin añadir selectores innecesarios.
Seleccionar elementos de una lista excepto uno
La pseudoclase :not() también es especialmente práctica en menús y listas.
Por ejemplo:
.menu li:not(.actual) {
opacity: 0.7;
}
En este caso, todos los elementos del menú tendrán una opacidad reducida excepto aquel que incluya la clase actual.
También podrías utilizarlo para ocultar elementos:
.lista li:not(.visible) {
display: none;
}
Con esta regla solamente permanecerían visibles los elementos que tengan la clase visible.
Combinar :not() con otros atributos 🧩
La pseudoclase :not() no está limitada exclusivamente a clases, ya que también puedes utilizar dentro de ella selectores de atributos, identificadores, etiquetas y otras condiciones compatibles.
Por ejemplo:
input:not([type="submit"]) {
width: 100%;
}
Este código seleccionará todos los campos input excepto aquellos cuyo tipo sea submit.
Otro ejemplo sería:
a:not([target="_blank"]) {
color: inherit;
}
Esta regla seleccionará los enlaces que no estén configurados para abrirse en una pestaña nueva.
Errores frecuentes al utilizar :not() ⚠️
Uno de los errores más habituales consiste en olvidar el punto delante del nombre de la clase.
Este código es incorrecto si quieres excluir una clase:
div:not(destacado) {
color: red;
}
En ese caso CSS interpretaría destacado como si fuera una etiqueta HTML, no como una clase.
La forma correcta sería:
div:not(.destacado) {
color: red;
}
Otro error frecuente consiste en crear selectores excesivamente largos cuando una combinación sencilla con :not() sería suficiente.
También debes prestar atención a la especificidad porque :not() forma parte del cálculo que determina qué regla CSS termina prevaleciendo cuando varias reglas afectan al mismo elemento.
Cuándo deberías utilizar :not() ✅
La pseudoclase :not() es especialmente recomendable cuando tienes un grupo de elementos que comparten estilos y solamente necesitas excluir algunas excepciones.
Por ejemplo, resulta muy práctica para modificar enlaces excepto botones, párrafos excepto introducciones, campos excepto botones de envío, elementos de menú excepto el elemento activo o tarjetas excepto aquellas que tengan un diseño especial.
Utilizar :not() puede ayudarte a escribir un CSS más corto, legible y fácil de mantener, especialmente cuando tu sitio empieza a crecer y acumula numerosas reglas.
Conclusión
Aprender cómo seleccionar elementos que no tienen una clase con CSS te permite resolver multitud de situaciones sin modificar el HTML ni crear clases adicionales.
La solución más habitual será utilizar elemento:not(.clase), mientras que elemento:not([class]) te permitirá seleccionar exclusivamente aquellos elementos que no tengan ninguna clase definida.
Si además combinas :not() con selectores de atributos, contenedores y varias exclusiones, podrás crear reglas CSS mucho más precisas y flexibles.
Dominar este pequeño selector te ayudará a mantener hojas de estilos más ordenadas y a realizar modificaciones concretas sin provocar cambios accidentales en otros elementos de tu web.
