CSS :not() Pseudo Class - Lean CSS

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

It is also known as the negation pseudo-class. It is a functional pseudo-class selector that takes a selector list as an argument and matches any element that does not match the argument. In Selectors Level 3, it accepts only simple selectors. Selectors Level 4 allows compound or complex selectors. Supported arguments include:

Type selector (e.g., p, span)
Class selector (e.g., .element)
ID selector (e.g., #header)
Pseudo-class selector (e.g., :last-child, :first-of-type)
Attribute selector (e.g., [type="text"])
The universal selector (*)

Important Notes

The :not() selector works with pseudo-classes, but does not support pseudo-elements.
The specificity of :not() is determined by the most specific selector in its argument. For example, :not(.foo) has the same specificity as .foo (0, 1, 0).
:not(.foo) matches anything that isn't .foo, including <html> and <body>.
The :not() selector applies to any element that fails to match the argument, not just a single element.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :not() syntax

selector:not(argument) {
  css declarations;
}

Example of the :not() pseudo-class:

CSS :not() code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>

Try it Yourself »

In the following example, there is an unordered list with a single class on the <li> tag.

Example of the :not() pseudo-class with the `<li>` tag:

CSS :not() another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>