:not()
The :not() negation pseudo-class matches elements that do not match the selector list inside it.
Syntax
:not(selector-list) { }Examples
.btn:not(.is-disabled) { cursor: pointer; }
li:not(:last-child) { margin-bottom: 0.5rem; }
input:not([type='checkbox'], [type='radio']) { width: 100%; }
Output
Applies a pointer to enabled buttons, spaces all but the last list item, and full-widths non-toggle inputs.
Notes
Accepts a selector list (modern browsers), making it powerful for exclusions. Its specificity equals the most specific argument inside it. Beware overly broad :not() rules that match unexpectedly.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 88 |
| firefox | 84 |
| safari | 9.0 |
| edge | 88 |