Web/CSS/ not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

/* Selects any element that is NOT a paragraph */
:not(p) {
  color: blue;
}

The :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

Syntax

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

The ability to list more than one selector is experimental and not yet widely supported.

:not( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]?  | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Description

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

The :not pseudo-class may not be nested, which means that :not(:not(...)) is invalid.
Since pseudo-elements are not simple selectors, they are not valid arguments to :not(); thus, selectors like :not(p::before) will not work.
Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
This pseudo-class can increase the specificity of a rule. For example, #foo:not(#bar) will match the same element as the simpler #foo, but has a higher specificity.
:not(.foo) will match anything that isn't .foo, including <html> and <body>.
This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since <tr> will match with the :not() part of the selector.

Examples

Basic set of :not() examples

HTML

<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

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> and not <span> elements */
body :not(div):not(span) {
  font-weight: bold;
}

/* Elements that are not <div>s or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an <h2> that aren't a <span> with a class of foo. */
/* Complex selectors such as an element with a class are not well supported yet. */
h2 :not(span.foo) {
  color: red;
}

Result

Specifications

Specification	Status	Comment
Selectors Level 4The definition of ':not()' in that specification.	Working Draft	Extends its argument to allow some non-simple selectors.
Selectors Level 3The definition of ':not()' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Negation pseudo-class selector (`:not()`)	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 9.5	Safari Full support 3.2	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0
Selector list argument	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari Full support 9	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 9	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support