Definition and Usage
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.
The specificity of the :not pseudo-class is the specificity of its argument. The :not pseudo-class does not add to the selector specificity, unlike other pseudo-classes.
Notes:
- Useless selectors can be written using this pseudo-class. E.g. :not(*) matching any element which is not any element will never be applied.
- It is possible to rewrite other rules. E.g. foo:not(bar)will match the same element as the simple foo. Nevertheless the specificity of the first one is higher.
Syntax
:not(selector) { style properties }
Examples
Usage Example
p:not(.classy) { color: red; } :not(p) { color: green; }
<p>Some text.</p> <p class="classy">Some other text.</p> <span>One more text<span>
Result:
Some text.
Some other text.
One more text
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
Extended arguments | Not supported | Not supported | Not supported | Not supported | Not supported |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1) | 9.0 | 10.0 | 3.2 |
Extended arguments | Not supported | Not supported | Not supported | Not supported | Not supported |