The :not() pseudo-class matches elements that do not match the selector list inside the parentheses. It is the negation filter for CSS selectors.
Example: li:not(.active) styles every list item except those with class active. Use it to write one rule with a clear exception instead of duplicating overrides.
Supported across modern browsers since 2015. Selector lists inside :not() (Level 4) are widely supported in current browsers; very old engines only allowed a single simple selector.
:not( <complex-selector-list>)Examples: :not(.active), :not(p, .note), input:not([type="submit"]).
:not() takes a selector list — not property values. Common argument patterns:
:not()Build a positive match, then exclude the exception.
li or input).:not(…) with the class, type, or state to skip.:not(.a, .b) instead of many overrides.:not(:is(…)).| Piece | Required? | Role |
|---|---|---|
| Base selector | Usually | Limits the pool (li, p, input) |
:not(…) | Yes | Drops matching exceptions |
| Selector list | Optional | Exclude several cases in one go |
| :is() wrapper | Optional | Forgiving list when an argument may be unsupported |
Pick a class to exclude. Items that match li:not(.…) get the muted style; the excluded class stays highlighted.
Short snippets that show one clear exclusion. Use Try It Yourself for a live editor.
Style every li except .active.
<style>
li:not(.active) {
color: #64748b;
}
</style>
<ul>
<li class="active">Active</li>
<li>Other</li>
<li>Other</li>
</ul>li. All list items are candidates.:not(.active). Items with class active are skipped.Exclude two classes in one :not().
<style>
li:not(.done, .warn) {
background: #eff6ff;
}
</style>
<ul>
<li>Todo</li>
<li class="done">Done</li>
<li class="warn">Warn</li>
</ul>:not(.done, .warn).:not(.done):not(.warn).Add dividers under every paragraph except the last.
<style>
p:not(:last-child) {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.75rem;
}
</style>
<div>
<p>First</p>
<p>Second</p>
<p>Last</p>
</div>:not(:last-child).p then undoing the last.Most surprises come from specificity, descendant paths, or invalid arguments.
:not() uses the specificity of its most specific selector (like :is()). #foo:not(#bar) is as heavy as two IDs.
body :not(table) a can still style links inside a table, because a parent like td is not a table. Prefer a:not(table a) when you mean “links that are not under a table.”
An unsupported selector inside :not() may invalidate the whole declaration. Use :not(:is(…)) for a forgiving list.
::before / ::after insidePseudo-elements are not valid arguments. Negate elements, classes, attributes, or other pseudo-classes only.
:not() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
Core :not() has been available across browsers since mid-2015. Complex selector lists inside :not() are supported in current Chromium, Firefox, and Safari. Internet Explorer 9+ supports a simpler form (one simple selector).
Bottom line: Safe for everyday exclusions. Prefer selector lists in modern browsers; chain :not() if you must support very old engines. This is not a JavaScript runtime API.
:not().:not(.a, .b) equals :not(.a):not(.b).li:not(.active) { … }.One line: :not() styles “everything except …” — keep the exception short and intentional.
Learn how to style items by their position among siblings.
5 people found this page helpful