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 (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
Extended arguments | No support | No support | No support | No support | No support | 9.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 1.0 (1) | 9.0 | 10.0 | 3.2 |
Extended arguments | No support | No support | No support | No support | No support | 9.0 |
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
Konrud,
Garbee,
haroldb,
jstewart8053,
chrisdavidmills,
Daniel Hug,
Sebastianz,
PyroLagus,
erikadoyle,
maltrics,
ziyunfei,
DominikDitoIvosevic,
teoli,
clongo,
armorking5,
duncancumming,
Sheppy,
bertyhell,
MusikAnimal,
Krinkle,
amitabha197,
frisellcpl,
emiluzelac,
tregagnon,
jswisher,
jjenzz,
kscarfone,
Tripad,
ethertank,
enderandpeter,
McGurk,
justjust,
Jürgen Jeka,
j.j.,
miken32
Last updated by:
mfluehr,