Widely available Supported across all major browsers. Safe to use in production.

:not()

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:not
1
12
1
3.1
18
2
selector list

Selector list argument
88
88
84
9
88
9
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Excluding multiple conditions */
button:not(.primary, .secondary) {
  background: gray;
  color: white;
}

/* Traditional syntax */
button:not(.primary):not(.secondary) {
  background: gray;
}

Live demo

button. exclude

:not() enhanced (multiple arguments) button. exclude demo.

PreviewFullscreen

listitem. exclude

:not() enhanced (multiple arguments) listitem. exclude demo.

PreviewFullscreen

Inputfield. exclude

:not() enhanced (multiple arguments) Inputfield. exclude demo.

PreviewFullscreen

Use cases

  • Using :not()

    The :not() CSS pseudo-class represents elements that do not match a list of selectors.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links