La pseudo-clase :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 pseudo-clase 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 pseudo-clase 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 pseudo-clase :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 pseudo-elemento.

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

Syntax not found in DB!

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 3.2WebView Android Soporte completo 2Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10Safari iOS Soporte completo 3.2Samsung Internet Android ?
Selector list argumentChrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9WebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Soporte completo 9Samsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, jotadeaa, luisgagocasas
Última actualización por: lajaso,