:not()
Quick Summary for :not
: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.
Code Usage for :not
<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any element that is NOT a paragraph /</span> <span class="token selector">:not(p)</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>
More Details for :not
: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.
: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:
:not pseudo-class may not be nested, which means that :not(:not(...)) is invalid. 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. Using two selectors at the same time is not yet supported in all browsers. Example: :not(.foo, .bar). For wider support you could use, :not(.foo):not(.bar) 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> .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; } Specifications
| Specification |
|---|
| Selectors Level 4 # negation |
See also
Pseudo-classes Pseudo-classes and pseudo-elements Related CSS pseudo-classes::has() :is() :where() Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
