:not() - Selector CSS

Description of the :not() pseudo-class.

The pseudo-class :not() provides the logical negation functionality. One or more selectors are specified within the parentheses. :not() targets all elements that are NOT targeted by the selectors listed in the parentheses.

Any combination of selectors can be indicated within the parentheses, except for some few pseudo-elements.
:not(::first-letter) is therefore invalid.

The selector list is not "forgiving," which means that a syntax error on any one of the selectors invalidates the entire list. This behavior is therefore opposite to that of the pseudo-classes :is() or :where() , which also accept a list of selectors but are forgiving.

Note: the :not(*) selector doesn't target anything at all.

Below, the yellow background was applied using the selector td:not(:first-child), which translates to "all td cells that are not the first ones (in their row)".
Similarly, the border of the header cells (morning / afternoon) was applied with the selector th:not(:first-child).

Specificity calculation.

The priority of the pseudo-class :not() is the same as that of the most specific selector listed.
Example: the pseudo-class :not(#id, .class) has the priority of #id.

Tip: :not() can be used to increase the priority of a selector. Example: we want to override an existing rule on #edito. ID selectors already have a very high priority (100), so the remaining option is to use !important, but this has drawbacks (see the page on Priorities).
You can also construct a selector like #edito:not(#bidon), which has a priority of 200, thus higher than a simple ID selector.

Example of use of the pseudo-class :not().

The inactive input areas of the form below are grayed out (reduced opacity). This was easily achieved using the :not(:focus) selector.

Browser compatibility with :not().

Initially, :not() only accepted a single selector in the parentheses (level 3 of the W3C specification). Level 4 of the specification specifies that it can be a list of selectors. Even this last option is relatively well supported by current browsers.

1

:not()
pseudo-class

2

:not()
pseudo-class
Selectors list

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Edge

Firefox

Chrome

Androïd Brower

KaiOS Browser

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the :not() pseudo-class.

• Selectors Level 3

  Definition of the pseudo-class :not() which accepts a single selector inside the parentheses.
  

  August 03, 1999

  Working Draft.

  

  November 13, 2001

  Candidate Recommendation.

  

  December 15, 2009

  Proposed for recommendation.

  

  September 29, 2011

  Recommendation .

• Selectors Level 4

  Extension of the pseudo-class :not(): it now accepts a combination of selectors within its parentheses.
  

  September 29, 2011

  Working Draft.

  

  

  

See also: other conditional pseudo-classes.

⚠

:any()

Obsolete pseudo-class, replaced by the new pseudo-class :is().

:defined

Pseudo-class targeting defined elements (variable concept depending on the language).

:has()

Pseudo-class targeting an element of which at least one of the children corresponds to one of the selectors passed as an argument.

:is()

Pseudo-class allowing complex syntaxes involving several selectors to be simplified.

⚠

:matches()

Obsolete pseudo-class, replaced by the new pseudo-classe :is().

:not()

Pseudo-class to reverse the action of a selector.

:where()

Pseudo-class allowing you to group selectors (equivalent to logical OR).