La :not()propiedad en CSS es una pseudoclase de negación y acepta un selector simple o una lista de selectores como argumento. Coincide con un elemento que no está representado por el argumento. El argumento pasado no puede contener selectores adicionales o selectores de pseudoelementos.
La capacidad de usar una lista de selectores como argumento se considera experimental, aunque su soporte está creciendo al momento de escribir este artículo, incluidos Safari (desde 2015), Firefox (desde diciembre de 2020) y Chrome (desde enero de 2021).
/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )En este ejemplo tenemos una lista desordenada con una sola clase en el
Nuestro CSS seleccionaría todos los
.different.
/* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )También puede hacer lo mismo usando pseudoclases que se consideran un selector simple.
p:not(:nth-child(2n+1)) ( font-size: 3em; )Sin embargo, si usamos un selector de pseudoelementos como nuestro argumento, no producirá el resultado esperado.
:not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )Selectores complejos
/* select all
s that are not descendants of */ p:not(article *) ( )
Ejemplo visual
:not()
Especificidad
La especificidad de la :not pseudoclase es la especificidad de su argumento. La :not() pseudoclase no añade especificidad al selector, a diferencia de otras pseudoclases.
Las negaciones no se pueden anidar, por :not(:not(… )) lo que nunca se permite. Los autores también deben tener en cuenta que, dado que los pseudoelementos no se consideran un selector simple, no son válidos como argumento para :not(X). Tenga cuidado al usar selectores de atributos, ya que algunos no son ampliamente compatibles como otros. Se permite encadenar :not selectores con otros :notselectores.
Soporte de navegador
La :not()pseudoclase se ha actualizado en la especificación CSS Selectors Level 4 para permitir una lista de argumentos. En CSS Selectors Level 3, solo era capaz de aceptar un solo selector simple. Como resultado, el soporte del navegador está un poco dividido entre los borradores de Nivel 3 y Nivel 4.
Selectores simples
| ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| 9+ | Todos | Todos | Todos | 12.1+ | Todos |
| Android Chrome | Android Firefox | Navegador de Android | Safari de iOS | Opera Mobile |
|---|---|---|---|---|
| Todos | Todos | Todos | Todos | Todos |
Listas de selección
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 88 | 84 | No | 88 | 9 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Más información
- Módulo de selectores CSS nivel 3
- Especificación CSS Selectors Level 4
