Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

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.

{{ csssyntax }}

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si199.53.2
Selector list argument No No No No No9
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si4103.2 ?
Selector list argument No No No No No9 No

Etiquetas y colaboradores del documento

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