: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;}

Notes:

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

Examples

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> and not <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;}

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Negation pseudo-class selector (:not())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.2WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
Selector list argumentChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 9Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support