: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 |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited