:not()
La pseudo-class CSS :not()
representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a pseudo-class de negació.
/* Selecciona qualsevol element que NO sigui un paràgraf */
:not(p) {
color: blue;
}
Notes:
- Els selectors inútils es poden escriure utilitzant aquesta pseudo-class. Per exemple,
:not(*)
coincideix amb qualsevol element que no sigui un element, de manera que mai no s'aplicarà la regla - Aquesta pseudo-class pot augmentar l'especificitat d'una regla. Per exemple,
#foo:not(#bar)
coincidirà amb el mateix element#foo
, més senzill, però té una especificitat més alta. :not(.foo)
coincidirà amb qualsevol cosa que no sigui.foo
, incoent<html>
i<body>
.- Aquest selector només s'aplica a un element; no es pot utilitzar per excloure a tots els ancestres. Per exemple,
body :not(table)
s'aplicarà als enllaços dins d'una taula, ja que<tr>
coincidirà amb la part:not()
del selector.
Sintaxi
La pseudo-class :not()
requereix una llista separada per comes d'un o més selectors com a argument. La llista no ha de contenir un altre selector de negació o un pseudo-element.
La capacitat d'enumerar més d'un selector és experimental i encara no està àmpliament suportada.
: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
Exemple
HTML
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
CSS
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* <p> elements that are not in the class `.fancy` */
p:not(.fancy) {
color: green;
}
/* Elements that are not <p> elements */
body :not(p) {
text-decoration: underline;
}
/* Elements that are not <div> or <span> elements */
body :not(div):not(span) {
font-weight: bold;
}
/* Elements that are not `.crazy` or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
Resultat
Especificacions
Especificació | Estat | Comentari |
---|---|---|
Selectors Level 4 The definition of ':not()' in that specification. |
Working Draft | Estén el seu argument per permetre a alguns selectors no simples. |
Selectors Level 3 The definition of ':not()' in that specification. |
Recommendation | Definició inicial. |
Navegadors compatibles
Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
Arguments estesos | No support | No support | No support | No support | No support | 9.0 |
Característica | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 2.1 | (Yes) | 1.0 (1) | 9.0 | 10.0 | 3.2 |
Arguments estesos | No support | No support | No support | No support | No support | 9.0 |