Codectionary / Developer documentation / CSS

Excluding Matches with :not

:not matches elements that do not match its argument.

What it is and why to use it

:not matches elements that do not match its argument. It is useful for targeting enabled controls or excluding a known variant without writing a rule for every remaining case. It can accept a selector list in modern implementations, but simple exclusions are often easier to read.

Common mistakes and limitations

:not contributes the specificity of its most specific argument rather than a fixed pseudo-class weight. It does not disable a control or create an inverse DOM collection. Keep complex selector lists understandable and preserve visible focus states.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<button>Available</button><button disabled>Unavailable</button>

Syntax

button:not(:disabled) { ... }

Examples

Excluding Matches with :not

Run the CSS against the supplied HTML, then experiment with the values.

button { margin: .5rem; padding: .75rem; }
button:not(:disabled) { border: 2px solid #2563eb; background: #dbeafe; color: #172b4d; }
button:disabled { opacity: .65; }
  1. The first button does not match :disabled, so it receives the active border and background.
  2. The disabled button uses the separate disabled style.
  3. The HTML disabled attribute controls behaviour; :not only chooses styling. This is useful for separating interactive and unavailable states.
HTML used by this example
<div class="demo"><button>Available</button><button disabled>Unavailable</button></div>

Best practices

  • :not contributes the specificity of its most specific argument rather than a fixed pseudo-class weight. It does not disable a control or create an inverse DOM collection. Keep complex selector lists understandable and preserve visible focus states.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading