References

Beginner-friendly references for web development, with live, editable examples.

The CSS :not() selector

Selector CSS All modern browsers Updated
Quick answer

The CSS :not() pseudo-class selects elements that do not match the selector inside it — li:not(.active) matches every list item except the active one. It is the clean way to apply a style to a group while excluding the exceptions, and modern browsers let you pass complex and multiple selectors.

Overview

:not() inverts a match: it selects everything that does not match the selector you give it. button:not(.primary) styles every button except the primary one, which is far tidier than styling them all and then overriding the exception.

It shines whenever you have a rule with a few exclusions. .card:not(:last-child) { margin-bottom: 16px; } adds spacing to every card but the last — combining negation with another pseudo-class in one expression. Modern CSS makes it more powerful still: you can pass a comma-separated list, :not(.a, .b), to exclude several things at once, and even complex selectors inside.

A note on specificity: :not() itself adds nothing, but it takes on the specificity of its most specific argument, so :not(#x) is as specific as an ID. Keep its arguments simple and it stays easy to reason about.

Syntax

/* every item except the active one */
li:not(.active) { opacity: 0.6; }

/* every card except the last */
.card:not(:last-child) { margin-bottom: 16px; }

Example

Live example 
<style>
  .tags span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #1c7ce9; color: #fff; font: 600 13px system-ui, sans-serif; margin: 3px; }
  .tags span:not(.on) { background: #e2e8f0; color: #475569; }
</style>
<div class="tags">
  <span class="on">Active</span>
  <span>Muted</span>
  <span>Muted</span>
</div>

Best practices

  • Use it to apply a rule to a group while cleanly excluding the exceptions, instead of styling-then-overriding.
  • Combine it with other pseudo-classes, e.g. :not(:last-child), for elegant edge handling.
  • Pass a comma-separated list to exclude several selectors at once: :not(.a, .b).
  • Watch specificity — :not() inherits the weight of its most specific argument, so keep arguments simple.

Frequently asked questions

What does :not() do in CSS?
It selects elements that do not match the selector inside it, e.g. li:not(.active) matches every list item except the active one.
How do I select all elements except one class?
Use :not(), e.g. .btn:not(.disabled) matches every .btn that is not also .disabled.
Can :not() take multiple selectors?
Yes, in modern browsers. :not(.a, .b) excludes elements matching either selector.
Does :not() affect specificity?
The pseudo-class itself adds none, but it takes the specificity of its most specific argument — so :not(#id) is as specific as an ID.
:last-child :nth-child()