not property CSS Reference

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

Mobile browsers