:not() - Sélecteur CSS

:not()

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

Description rapide

Pseudo-classe pour inverser l'action d'un sélecteur.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

🡇

🡅

Selectors Level 4

Statut du document: WD (document de travail)

Selectors Level 3

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

	Matin	Aprè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.

Pseudo-classe
:not()

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

Estimation de la prise en charge globale.

98%

96%