CSS - :not()

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.

Example

 

CSS
p:not(.classy) { color: red; }
body *:not(p) { color: green; }

Given the above CSS and the HTML below...

HTML
<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

You get output like this:

Syntax  

CSS
:not( <selector><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> ) <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a> <var>style properties</var> <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a>

Description  

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.

Notes:
  • Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not any element, so the rule will never be applied.
  • It is possible to rewrite other rules. E.g. foo:not(bar) will match the same element as the simpler foo. Nevertheless the specificity of the first one is higher.
  • :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.

Browser Compatibility  

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 No support No support No support No support No support
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 No support No support No support No support No support

 

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.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:not

CSS CSS Pseudo-class Layout Reference Référence Web