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

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

Androïd Brower

KaiOS Browser

Chrome 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

  Concernant :not(). 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

  Concernant :not(). 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.