La pseudo-clase :not en CSS te permite aplicar estilos a todos los elementos excepto a los que cumplen una condición específica, ahorrando líneas de código y simplificando tu hoja de estilos. Es ideal para quienes ya conocen :is y :where y quieren dar un paso más en la escritura de CSS moderno.

Qué es la pseudo-clase :not y para qué sirve

A diferencia de :is o :where, que agrupan varios selectores para aplicarles el mismo estilo, :not hace lo contrario: excluye los elementos que coincidan con el selector que pongas dentro de los paréntesis. Es decir, en lugar de decirle al navegador qué quieres seleccionar, le dices qué no quieres tocar.

¿Qué hace :not en CSS? Selecciona todos los elementos que no coinciden con el selector indicado dentro de sus paréntesis. Por ejemplo, p:not(.distinto) aplica estilos a todos los <p> excepto a los que tengan la clase distinto.

Esto es especialmente útil cuando tienes muchos elementos similares y solo uno o dos casos que quieres dejar fuera. En vez de listar todos los que sí quieres estilizar, marcas la excepción y listo.

Cómo aplicar :not paso a paso en un ejemplo real

Imagina que tienes tres párrafos en tu HTML: el primero y el tercero deben compartir un mismo estilo, y el segundo lleva una clase llamada distinto porque quieres que se vea diferente.

html

<p>Quiero que este párrafo tenga un estilo particular.</p> <p class="distinto">Quiero que este párrafo sea distinto.</p> <p>Quiero que este párrafo tenga el mismo estilo que el primero.</p>

En lugar de seleccionar uno por uno los párrafos que sí quieres modificar, usas :not para excluir el que tiene la clase distinto:

css p:not(.distinto) { color: blueviolet; font-style: italic; }

Con esa única regla, el primer y tercer párrafo aparecen en color blueviolet y en cursiva, mientras que el del medio conserva su estilo original. Una sola línea hizo el trabajo de dos selectores separados.

Por qué :not ahorra más código que :is o :where

Cuando usas :is o :where, sigues teniendo que enumerar los elementos que sí quieres estilizar. Si son muchos, la lista se alarga. En cambio, con :not basta con apuntar a la excepción.

• Con :is o :where, listas todo lo que entra.
• Con :not, listas solo lo que sale.
• Si las excepciones son menos que las inclusiones, :not te ahorra más líneas.

Por eso, cuando tu intención es excluir uno o pocos casos de un grupo grande, :not se vuelve la opción más limpia y eficiente.

Cuándo conviene usar :not en lugar de otros selectores

La decisión depende de cómo está pensado tu diseño. Si la mayoría de tus elementos comparten estilo y solo unos pocos son la excepción, :not brilla. Si por el contrario tienes varios grupos distintos que comparten reglas puntuales, :is y :where siguen siendo tus aliados.

¿Cuál es la diferencia entre :not y :is en CSS? :is agrupa varios selectores para aplicarles el mismo estilo, mientras que :not excluye los que coincidan con el selector indicado. Uno incluye, el otro descarta.

Un buen criterio práctico es preguntarte: ¿es más corto describir lo que quiero estilizar o lo que quiero dejar fuera? Esa respuesta te dice qué pseudo-clase usar.

Combinar :not con clases para mayor control

Dentro del paréntesis de :not puedes poner clases, IDs, atributos o incluso otros selectores. Eso te da mucha flexibilidad para definir excepciones precisas sin escribir reglas repetidas. En el ejemplo, usamos .distinto, pero podrías excluir un atributo específico, un hijo directo o cualquier otro patrón.

La idea central se mantiene: menos código, más claridad y mejor mantenimiento de tu CSS. Cuéntame en los comentarios cómo estás usando :not en tus proyectos y qué combinaciones te han funcionado mejor.