Contents
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
1 | p:not(.classy) { color: red; } |
2 | :not(p) { color: green; } |
1 | <p>Some text.</p> |
2 | <p class="classy">Some other text.</p> |
3 | <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 |







