Pseudoclase CSS :not() - Aprende CSS

La pseudoclase CSS :not() selecciona todo elemento que no coincida con el selector que se le pasa como argumento. Dado que invierte una coincidencia, también se la denomina pseudoclase de negación.

Esta página explica qué hace :not(), cuándo utilizarla, cómo afecta a la especificidad y los errores comunes en los que la gente cae, con ejemplos ejecutables que puedes editar.

Qué es `:not()`

:not() es una pseudoclase funcional: recibe un selector como argumento y coincide con cualquier elemento que el argumento no seleccione. Los argumentos admitidos incluyen:

Selector de tipo (p. ej., p, span)
Selector de clase (p. ej., .element)
Selector de ID (p. ej., #header)
Selector de pseudoclase (p. ej., :last-child, :first-of-type)
Selector de atributo (p. ej., [type="text"])
El selector universal (*)

En Selectors Level 3, el argumento debía ser un único selector simple. Selectors Level 4 lo amplió para aceptar una lista separada por comas y selectores compuestos o complejos, por lo que en los navegadores modernos puedes escribir :not(.a, .b) o :not(ul li.first).

Cuándo usarla

Recurre a :not() cuando es más corto describir lo que deseas excluir que listar todo lo que deseas incluir:

Estilizar todos los elementos de lista excepto el último: li:not(:last-child).
Estilizar todos los enlaces que no sean externos: a:not([target="_blank"]).
Añadir espacio entre elementos hermanos sin margen al final: .item:not(:first-child) { margin-top: 1rem; }.
Desactivar el estilo para una variante: .btn:not(.btn-ghost) { background: #8ebf42; }.

Notas importantes

El selector :not() funciona con pseudoclases, pero no admite pseudoelementos.
La propia palabra clave :not() no añade especificidad — solo lo hace su argumento. Por tanto, :not(.foo) tiene la misma especificidad que .foo (0, 1, 0), y un simple :not(p) pesa igual que p (0, 0, 1). Esto hace que :not() sea menos costoso que una clase adicional equivalente y puede sorprenderte en conflictos de sobreescritura.
:not(.foo) coincide con cualquier elemento que no sea .foo, incluidos <html> y <body>. Combínalo siempre con un contexto como ul li:not(.foo) para que no se extienda a todo el documento.
El selector :not() se aplica a todos los elementos que no coinciden con el argumento, no solo a un único elemento.
Un :not() vacío — :not() sin nada dentro — es inválido y la regla completa se ignora.

Versión

Selectors Level 3

Selectors Level 4

Sintaxis

Sintaxis de CSS :not()

selector:not(argument) {
  css declarations;
}

Ejemplo de la pseudoclase :not():

Ejemplo de código CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, hay una lista desordenada con una única clase en la etiqueta <li>.

Ejemplo de la pseudoclase :not() con la etiqueta `<li>`:

Otro ejemplo de código CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

Pasar una lista de selectores (Selectors Level 4)

Los navegadores modernos te permiten excluir varios selectores a la vez separándolos con comas dentro de un único :not(). La regla siguiente colorea todos los elementos de lista excepto el silenciado y el activo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #8ebf42;
      }
      li:not(.muted, .active) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>:not() with a selector list</h2>
    <ul>
      <li>Highlighted item</li>
      <li class="muted">Muted item</li>
      <li class="active">Active item</li>
      <li>Highlighted item</li>
    </ul>
  </body>
</html>

Esto equivale al li:not(.muted):not(.active) más antiguo y verboso, que puedes usar si necesitas compatibilidad con navegadores muy antiguos.

Selectores relacionados

CSS Selectors — la referencia completa de tipos de selectores.
:first-child y :last-child — combínalos con :not() para trucos de espaciado.
:nth-child() — otra forma de apuntar a un subconjunto de elementos hermanos.

Práctica

¿Qué hace la pseudoclase :not() en CSS?

Representa un elemento que no está representado por su argumentoSe usa para especificar un atributo concreto de un elementoSelecciona todos los elementos que no son el elemento especificadoEs el opuesto de la pseudoclase :has

Qué es :not()