: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.
css
/* Selecciona cualquier elemento que NO sea un párrafo */
:not(p) {
color: blue;
}
Nota:
- 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#foomá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) ase 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.
Advertencia: La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.
Ejemplo
HTML
html
<p>Soy un párrafo.</p>
<p class="fancy">¡Soy muy elegante!</p>
<div>NO soy un párrafo.</div>
CSS
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 |
|---|
| Selectors Level 4 # negation |
Compatibilidad con navegadores
BCD tables only load in the browser