W3cubDocs

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

Notes:

Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element, so the 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.

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( <selector># )

Example

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> or <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

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	Yes	1	9	9.5	3.2
Selector list argument	No	No	No	No	No	9

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Basic support	2.1	?	Yes	4	10	3.2	?
Selector list argument	No	No	No	No	No	9	?

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:not