Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

:not() - Sélecteur CSS

:not()

Résumé des caractéristiques du sélecteur :not()

Description rapide
Inverse l'action d'un sélecteur.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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 les 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).

MatinAprès-midi
Lundi
Mardi
Mercredi
Jeudi
Vendredi

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 règles de priorité).
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 :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).

Prise en charge de :not() par les navigateurs.

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
:not()
2
:not() avec liste de sélecteurs
Estimation de la prise en charge en pourcentage du parc actuel.
98%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi : pseudo-classes conditionnelles.

  • :is() :
  • Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.

  • :not() :
  • Inverse l'action d'un sélecteur.

  • :where() :
  • Pseudo-classe permettant de grouper des sélecteurs (équivalent du OU logique).

  • :else() :
  • :has() :
  • Pseudo-classe désignant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.