:not(s)

The :not(X) property in CSS is a negation pseudo class and accepts a simple selector as an argument. Essentially, just another selector of any kind.

:not matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

In this example we have an unordered list with a single class on the li:

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

Our CSS would select all the <li> elements except the one(s) with a class of.different.

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

You could also do the same using pseudo classes which are considered a simple selector.

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

However if we use a pseudo element selector as our argument it will not produce the expected result.

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

The specificity of the :not pseudo class is the specificity of its argument. The :not()pseudo class does not add to the selector specificity, unlike other pseudo-classes.

Negations may not be nested so :not(:not(...)) is never permitted. Authors should also note that since pseudo elements are not considered a simple selector, they are not valid as an argument to :not(X). Be mindful when using attribute selectors as some are not widely supported as others. Chaining :not selectors with other :not selectors is permissible.

Browser Support