:not CSS Pseudo Class
Description
The :not pseudo-class sets style rules for elements that do not contain the specified selector, it is known as the negation pseudo-class.
Syntax
element:not(<selector>) { ... }
Example
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>.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;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 1 | 1 | 9.5 | 3.2 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 2 | 18 | 4 | 10.1 | 3.2 | X |