La pseudo-classe de négation, :not(), est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler un élément qui n'est pas représenté par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation.

La spécificité de la pseudo-classe :not est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.

Notes :

  • Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, :not(*) va exclure tous les éléments et ne sera jamais appliqué.
  • À l'inverse, il est possible d'augmenter la spécificitié d'un sélecteur. Ainsi. toto:not(truc) ciblera les mêmes éléments que :toto, mais avec une spécificité plus forte.
  • :not(toto){} ne ciblera aucun élément qui n'est toto, notamment <html> et <body>.
  • Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, body :not(table) s'appliquera aux liens contenus dans un tableau car <tr> ne sera pas ciblé par la partie :not() du sélecteur.

Syntaxe

:not(sélecteur) { propriétés CSS }

Exemples

CSS

/* Contient tous les paragraphes (p) sauf
   ceux avec le sélecteur de class "classy" */
p:not(.classy) {
  color: red;
} 

/* Les balises p sont exclues*/ 
body :not(p) {
  color: green;
}

HTML

<p>
  Un peu de texte.
</p>
<p class="classy">
  Encore du texte.
</p>
<span>
  Et toujours du texte.
<span>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':not()' dans cette spécification.
Version de travail La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.
Selectors Level 3
La définition de ':not()' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 9.0 9.5 3.2
Arguments étendus Pas de support Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1) 9.0 10.0 3.2
Arguments étendus Pas de support Pas de support Pas de support Pas de support Pas de support

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, dackmin, tregagnon, teoli, tzilliox, FredB, the prisoner
 Dernière mise à jour par : SphinxKnight,