:not() - Sélecteur CSS

Description de la pseudo-classe :not().

La pseudo-classe :not() apporte la fonctionnalité logique de négation. Un ou plusieurs sélecteurs sont indiqués entre les parenthèses. :not() cible tous les éléments qui NE sont PAS ciblés par les sélecteurs indiqués dans les parenthèses.

N'importe quelle combinaison de sélecteurs peut être indiquée entre les parenthèses, sauf quelques pseudo-éléments.
:not(::first-letter) est donc invalide.

La liste de sélecteurs n'est pas "tolérante", ce qui veut dire qu'une erreur de syntaxe sur l'un des sélecteurs invalide toute la liste. Ce fonctionnement est donc contraire à celui des pseudo-classes :is() ou :where() qui acceptent elles aussi une liste de sélecteurs mais tolérante.

Remarque : le sélecteur :not(*) ne cible rien du tout.

Ci-dessous l'arrière-plan jaune a été appliqué via le sélecteur td:not(:first-child), ce qui se traduit par "toutes les cellules td qui ne sont pas les premières (sur leur ligne)".
De même la bordure des cellules de titre (matin / après-midi) a été appliquée avec le sélecteur th:not(:first-child).

Calcul de la priorité.

La priorité de la pseudo-classe :not() est identique à celle du sélecteur le plus prioritaire qui figure dans la liste.
Exemple : la pseudo-classe :not(#id, .classe) à la priorité de #id.

Astuce : :not() peut être utilisé pour augmenter la priorité d'un sélecteur. Exemple : on souhaite surcharger une règle déjà existante sur #edito. Les sélecteurs par ID ayant déjà une priorité très forte (100), il reste la solution d'utiliser !important mais cela présente des inconvénients (voir la page sur Les priorités).
On peut aussi construire un sélecteur comme #edito:not(#bidon), qui a une priorité de 200, donc supérieure à celle du sélecteur sur un simple ID.

Exemples d'utilisation de la pseudo-classe :not().

Les zones de saisie non actives du formulaire ci-dessous sont grisée (opacité réduite). Ceci a facilement été réalisé en utilisant le sélecteur :not(:focus).

Compatibilité des navigateur avec :not().

Initialement, :not() n'acceptait qu'un seul sélecteur dans les parenthèses (niveau 3 de la spécification du W3C). Le niveau 4 de la spécification précise qu'il peut s'agir d'une liste de sélecteurs. Même cette dernière possibilité est relativement bien prise en charge par les navigateurs actuels.

1

Pseudo-classe
:not()

2

Pseudo-classe
:not()
liste de sélecteurs

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la pseudo-classe :not().

• Sélecteurs - Niveau 3

  Définition de la pseudo-classe :not() qui accepte un sélecteur unique dans les parenthèses.
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Extension de la pseudo-classe :not() : elle accepte maintenant une combinaison de sélecteurs dans ses parenthèses.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi : autres pseudo-classes conditionnelles.

⚠
:any()
Pseudo-classe obsolète. A été remplacée par :is().
:defined
Pseudo-classe désignant les éléments définis (notion variable suivant le langage).
:has()
Pseudo-classe ciblant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.
:is()
Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.
⚠
:matches()
Pseudo-classe obsolète, remplacée par is().
:where()
Pseudo-classe permettant de grouper des sélecteurs (équivalent du OU logique).