:not()

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

/* Selecciona cualquier elemento que NO sea un párrafo */
:not(p) {
  color: blue;
}

Notas:

  • Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, :not(*) coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.
  • Esta pseudoclase puede aumentar la especificidad de una regla. Por ejemplo, #foo:not(#bar) coincidirá con el mismo elemento que el #foo más simple, pero tiene una especificidad más alta.
  • :not(.foo) coincidirá con cualquier cosa que no sea .foo, incluidos <html> y <body>.
  • Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, body :not(table) a se aplicará a los enlaces dentro de una tabla, ya que <tr> coincidirá con la parte :not() del selector.

Sintaxis

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

:not( <complex-selector-list> )

where
<complex-selector-list> = <complex-selector># (en-US)

where
<complex-selector> = <compound-selector> [ (en-US) <combinator>? (en-US) <compound-selector> ] (en-US)* (en-US)

where
<compound-selector> = [ (en-US) <type-selector>? (en-US) <subclass-selector>* (en-US) [ (en-US) <pseudo-element-selector> <pseudo-class-selector>* (en-US) ] (en-US)* (en-US) ] (en-US)! (en-US)
<combinator> = '>' | (en-US) '+ (en-US)' | (en-US) '~' | (en-US) [ (en-US) '|| (en-US)' ] (en-US)

where
<type-selector> = <wq-name> | (en-US) <ns-prefix>? (en-US) '* (en-US)'
<subclass-selector> = <id-selector> | (en-US) <class-selector> | (en-US) <attribute-selector> | (en-US) <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | (en-US) ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? (en-US) <ident-token>
<ns-prefix> = [ (en-US) <ident-token> | (en-US) '* (en-US)' ] (en-US)? (en-US) | (en-US)
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[ (en-US)' <wq-name> '] (en-US)' | (en-US) '[ (en-US)' <wq-name> <attr-matcher> [ (en-US) <string-token> | (en-US) <ident-token> ] (en-US) <attr-modifier>? (en-US) '] (en-US)'

where
<attr-matcher> = [ (en-US) '~' | (en-US) | (en-US) | (en-US) '^' | (en-US) '$' | (en-US) '* (en-US)' ] (en-US)? (en-US) '='
<attr-modifier> = i | (en-US) s

Ejemplo

HTML

<p>Soy un párrafo.</p>
<p class="fancy">¡Soy muy elegante!</p>
<div>NO soy un párrafo.</div>

CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* elementos <p> que no están en la clase `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elementos que no son elementos <p> */
body :not(p) {
  text-decoration: underline;
}

/* Elementos que no son elementos <div> o <span> */
body :not(div):not(span) {
  font-weight: bold;
}

/* Elementos que no son `.crazy` o `.fancy` */
/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

Resultado

Especificaciones

Specification Status Comment
Selectors Level 4
La definición de ':not()' en esta especificación.
Working Draft Extiende su argumento para permitir algunos selectores no simples.
Selectors Level 3
La definición de ':not()' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

BCD tables only load in the browser