CSS :not() Pseudo Class

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 simple selector as an argument and matches with one or more elements not being represented by the argument.

The :not() selector takes as an argument any of the following:

Type selector (e.g p, span, etc.)
Class selector (e.g .element etc.)
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 does not work with pseudo selectors attached to the different elements which are doing pseudo selection.
Useless selectors can be written with the :not selector.
The :not selector can increase the specificity of a rule.
The:not(.foo) matches anything that isn't .foo, (including <html> and <body>).
The :not selector only applies to one element.
If you use the :not() without applying it to just one element, it will select all elements in a document that are not represented in the argument.

Version

Selectors Level 3

Selectors Level 4

Syntax

:not() {
  css declarations;
}

Example of the :not() pseudo-class:

<!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:

<!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>