CSS :not() Selector - Exclude Elements from Selection

The :not() Negation Pseudo-class

The :not() selector matches elements that do not match the argument selector. It is one of the most versatile tools for writing clean, efficient CSS.

Syntax

:not(selector) {
  /* styles for elements NOT matching selector */
}

Basic Examples

Style all paragraphs except those with a class:

p:not(.special) {
  color: gray;
}

Style all inputs except submit buttons:

input:not([type="submit"]) {
  border: 1px solid #ccc;
  padding: 8px;
}

Chaining :not()

You can chain multiple :not() selectors:

/* All list items except first and last */
li:not(:first-child):not(:last-child) {
  border-bottom: 1px solid #eee;
}

CSS Selectors Level 4

In modern browsers, :not() accepts a comma-separated selector list:

/* Level 4: exclude multiple selectors */
:not(.hidden, .disabled, [aria-hidden="true"]) {
  display: block;
}

Specificity

The specificity of :not() is determined by its most specific argument. The :not() wrapper itself adds no specificity:

:not(.active)     /* Specificity: (0, 1, 0) — from .active */
:not(#main)       /* Specificity: (1, 0, 0) — from #main */
:not(p)           /* Specificity: (0, 0, 1) — from p */

Common Patterns

/* Dividers between items (no border on last) */
.item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

/* Style all form elements except disabled */
input:not(:disabled) {
  cursor: pointer;
}

/* Reset link styles for buttons styled as links */
a:not([href]) {
  text-decoration: none;
  color: inherit;
}