:not()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Try it

p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}


  Mars is one of the most Earth-like planets. Mars day is almost
  the same as an Earth day, only 37 minutes longer.



  NASA's Jet Momentum Propulsion Laboratory
  is designing mission concepts to survive the Venus extreme temperatures
  and atmospheric pressure.

The :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

The :not() pseudo-class requires a selector list, a comma-separated list of one or more selectors, as its argument. The list must not contain a pseudo-element, but any other simple, compound, and complex selectors are allowed.

css

:not() {
  /* ... */
}

Description

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

This selector will match everything that is "not an X". This may be surprising when used with descendant combinators, since there are multiple paths to select a target element. For instance, body :not(table) a will still apply to links inside a

, since , , 
, , 
, etc. can all match the :not(table) part of the selector. To avoid this, you can use body a:not(table a) instead, which will only apply to links that are not descendants of a table.
You can negate several selectors at the same time. Example: :not(.foo, .bar) is equivalent to :not(.foo):not(.bar).
If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use :is() pseudo-class, which accepts a forgiving selector list. For example :not(.foo, :invalid-pseudo-class) will invalidate a whole rule, but :not(:is(.foo, :invalid-pseudo-class)) will match any (including  and ) element that isn't .foo.
Examples
Using :not() with valid selectors
This example shows some a few examples of using :not().
HTML
html
I am a paragraph.
I am so very fancy!
I am NOT a paragraph.

  foo inside h2
  bar inside h2


CSS
css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/*  elements that don't have a class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not 
 elements */
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not s or `.fancy` */
body :not(div):not(.fancy) {
  font-weight: bold;
}

/* Elements that are not s or `.fancy` */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an  that aren't a  with a class of `.foo` */
h2 :not(span.foo) {
  color: red;
}

Result
Using :not() with invalid selectors
This example shows the use of :not() with invalid selectors and how to prevent invalidation.
HTML
html
I am a paragraph with .foo
I am a paragraph with .bar
I am a div without a class
I am a div with .foo
I am a div with .bar
I am a div with .foo and .bar

CSS
css
/* Invalid rule, does nothing */
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/* Select all  elements without the `foo` class */
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/* Select all  elements without the `foo` or the `bar` class */
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/* Select all  elements without the `foo` or the `bar` class */
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}

Result

The p:not(.foo, :invalid-pseudo-class) rule is invalid because it contains an invalid selector. The :is() pseudo-class accepts a forgiving selector list, so the :is(.foo, :invalid-pseudo-class) rule is valid and equivalent to :is(.foo). Thus, the p:not(:is(.foo, :invalid-pseudo-class)) rule is valid and equivalent to p:not(.foo).
If :invalid-pseudo-class was a valid selector, the first two rules above would still be equivalent (the last two rules showcase that). The use of :is() makes the rule more robust.
Specifications
Specification
Selectors Level 4 
# negation
Browser compatibility
See also


Pseudo-classes


Learn: Pseudo-classes and pseudo-elements


Other functional CSS pseudo-classes:

:has()
:is()
:where()



How :not() chains multiple selectors on MDN blog (2023)

Help improve MDN
Was this page helpful to you?
Learn how to contribute.This page was last modified on Mar 3, 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content
Your blueprint for a better internet.
MDN on Bluesky
MDN on Mastodon
MDN on X (formerly Twitter)
MDN on GitHub
MDN Blog RSS Feed
MDN
About
Blog
Careers
Advertise with us
Support
Product help
Report an issue
Our communities
MDN Community
MDN Forum
MDN Chat
Developers
Web Technologies
Learn Web Development
MDN Plus
Hacks Blog
Website Privacy Notice
Cookies
Legal
Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.

HTML

foo inside h2 bar inside h2

CSS

that aren't a with a class of `.foo` */ h2 :not(span.foo) { color: red; }

Result

HTML

CSS

Result