CSS :not() Selector

What You’ll Learn

The :not() pseudo-class selects elements that do not match a condition. It is a negation filter for precise, exception-based styling.

Introduction

The :not() selector in CSS is a powerful pseudo-class that allows you to select elements that do not match a certain condition. It acts as a negation filter, making it easier to exclude specific elements from being styled while still targeting others.

This selector can be combined with various other selectors to give more precise control over styling.

Definition and Usage

Write :not(selector) with any valid CSS selector inside the parentheses. The rule matches elements that fail that selector test.

📝 Syntax

The syntax for the :not() pseudo-class is:

:not(selector) {
  /* CSS properties */
}

The :not() selector accepts any valid CSS selector inside the parentheses and excludes matching elements from the rule.

Basic Example

li:not(.active) {
  background: #f1f5f9;
  color: #334155;
}

.active {
  background: #16a34a;
  color: #fff;
}

Chaining Multiple Exclusions

/* Exclude submit and reset buttons */
input:not([type="submit"]):not([type="reset"]) {
  border: 2px solid #2563eb;
}

/* Modern: comma list inside one :not() */
input:not([type="submit"], [type="reset"]) {
  border: 2px solid #2563eb;
}

Syntax Rules

• Place :not() after the element or scope: li:not(.active).
• Chain multiple exclusions: :not(.a):not(.b).
• Modern browsers allow comma lists: :not(.a, .b).
• Combine with pseudo-classes: :invalid:not(:placeholder-shown).
• Avoid overly complex selectors inside :not() for performance.

Related Selectors

• :has() — select parents that contain a match; pair with :not(:has())
• .class / #id — common arguments inside :not()
• [attribute] — exclude inputs by type or state
• :is() — opposite grouping pattern (match any in a list)

When to Use :not()

:not() is ideal for exception-based styling:

• Highlight exceptions — Style all list items except the active one.
• Form fields only — Style text inputs but exclude submit and reset buttons.
• Spacing between items — Add margin to all paragraphs except the last: p:not(:last-child).
• Delayed validation — Show errors only after typing: :invalid:not(:placeholder-shown).
• Empty states — Select containers without children: .card:not(:has(img)).

Examples Gallery

Practice :not() with list exceptions, form inputs, paragraph spacing, and validation patterns.

<style>
  li:not(.active) {
    background: #f1f5f9;
    color: #334155;
    padding: 0.65rem 0.9rem;
  }
  .active {
    background: #16a34a;
    color: #fff;
    font-weight: 600;
  }
</style>

<ul>
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
  <li>Item 5</li>
</ul>

input:not([type="submit"]):not([type="reset"]) {
  border: 2px solid #2563eb;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
}

p:not(:last-child) {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
  background: #fef2f2;
}

input:valid {
  border-color: #16a34a;
}

💬 Usage Tips

• Any selector inside — Use classes, attributes, pseudo-classes, or elements in the parentheses.
• Chain for multiple — :not(.a):not(.b) excludes both conditions.
• Comma lists — Modern browsers support :not(.a, .b) in one call.
• Pair with :has() — :not(:has(a)) selects elements without links inside.
• Keep it readable — Simple inner selectors are easier to maintain than deep chains.

⚠️ Common Pitfalls

• Performance — Overusing complex :not() selectors on large pages can slow matching.
• Specificity surprises — :not(.x) adds the specificity of its argument.
• Legacy IE — IE8 and below do not support :not().
• Universal selector — :not(*) is rarely useful; be intentional with exclusions.
• Over-nesting — Long chains like :not(.a):not(.b):not(.c) may signal a need for clearer markup.

♿ Accessibility

• Do not hide meaning — Excluding elements from styles should not remove important visual cues.
• Form validation — Pair delayed error styles with clear labels and ARIA where needed.
• Active states — Ensure excluded “active” items still meet contrast requirements.
• Focus styles — Do not use :not() to strip focus outlines from interactive elements.

💡 Best Practices