:not() Selector
:not(selector) matches elements that do NOT match the given selector. It is useful for applying styles to everything except specific elements.
CSS
Intermediate
5 min read
The :not() Pseudo-Class
Example
/* Style all buttons except disabled */
button:not([disabled]) {
cursor: pointer;
}
button:not([disabled]):hover {
background: #0056b3;
}
/* All inputs except checkboxes and radio */
input:not([type="checkbox"]):not([type="radio"]) {
border: 1px solid #ced4da;
padding: 0.5rem;
}
/* All list items except the last */
li:not(:last-child) {
margin-bottom: 0.5rem;
} Pro Tip
:not() accepts complex selectors in modern browsers — :not(.active, .disabled) matches elements with neither class.