La pseudo-classe de négation :not peut être extrêmement utile. Elle nous permet de cibler des éléments en fonction d’attributs qu’ils n’ont pas. Ce faisant, elle nous évite le recours à des règles supplémentaires et toujours plus spécifiques.

Un exemple assez courant serait celui d’une liste à laquelle nous voulons appliquer un style — sauf au dernier item :

/* Sans :not */
li { border-right: 1px solid #000; }
li:last-child { border-right: none; }

/* Avec :not */
li:not(:last-child) { border-right: 1px solid #000; }

La pseudo classe :not fait partie de mes préférées. Cependant, je me suis parfois trouvée dans des situations où la déclaration :not n’écrasait pas la déclaration initiale. Par exemple :

a:not(.ul) { text-decoration: none; }
nav a { text-decoration: underline; }

Dans ce cas précis, je me suis aperçue que les éléments nav a n'étaient toujours pas soulignés. Après un moment de confusion, j’ai approfondi ma recherche sur le fonctionnement de la règle :not et son effet sur la spécificité.

La spécificité en 5 sec

La spécificité en CSS peut être compliquée à comprendre, le mieux est de commencer par un exemple. Prenons l’élément HTML suivant :

<p class="foo" id="bar">Lorem ipsum dolor sit amet.</p>

et les styles que voici :

p { color: red; }
.foo { color: green; }
#bar { color: blue; }
p.foo#bar { color: yellow; }

Dans les cas comme celui-ci, où plusieurs sélecteurs ciblent le même élément, c’est la spécificité du sélecteur qui déterminera les règles qui prévaudront.

La spécificité d’un sélecteur dépend de deux facteurs :

1. De quels types de sélecteur s’agit-il ? Il y a trois types de sélecteurs :
   a. les ID, par exemple #bar
   b. les classes (dont les pseudo-classes), par exemple .foo ou :last-child
   c. les types, par exemple p
2. Le nombre de chacun des sélecteurs. Par exemple s’il y a 2 IDs et 3 classes.

Ces deux facteurs combinés déterminent le niveau de spécificité d’un sélecteur. Si nous revenons à notre exemple, voici comment est calculée la spécificité de chaque sélecteur.

Pour lire le résultat figurant dans la colonne “Spécificité”, on ne prend pas le nombre global, mais chaque unité qui le compose, de gauche à droite.

Quand on compare deux sélécteurs, on prend la première valeur (qui représente le nombre de sélecteurs ID) et on les compare. Si un sélecteur a une valeur ID plus élevée, il gagne automatiquement la bataille. Si, et seulement si, les deux sélecteurs ont la même valeur ID, on passe à la suivante (dans ce cas, c’est le nombre de classes) et ainsi de suite.

Prenons l’exemple suivant :

Un seul ID l’emportera toujours sur 100 classes, parce que le nombre de classes est sans importance s’il existe un ID.

Remarque : ces calculs ne s’appliquent qu’aux styles définis en CSS. Les styles définis en ligne auront la priorité.

👉🏿 NdT : Pour approfondir ce sujet, vous pouvez consulter Cascade CSS et priorité des sélecteurs de Laurent Denis.

Et :not là-dedans ?

La pseudo-classe de négation n’ajoute rien à la quantité de spécificité contrairement aux autres pseudo-classes. Cependant, les sélecteurs situés à l’intérieur de :not, oui.

Relativement à la spécificité, ajouter p:not(.foo) revient au même qu’ajouter .notFoo à tous les p n’ayant pas la classe .foo.

Par exemple :

p.bar { color: red; }
p:not(.foo) { color: green; }

De quelle couleur pensez-vous que sera <p class="bar"> ? La bonne réponse est vert, pas rouge. Ceci parce qu’en ajoutant la règle :not nous avons fait l’équivalent d’un ajout de classe .notFoo à notre élément <p class="bar">.

La règle :not est maintenant au même niveau de spécificité que les éléments ayant une “vraie” classe. Mais comme elle est définie après dans le CSS, c’est elle qui prévaut.Cela explique aussi pourquoi, dans notre exemple de nav, la règle :not l’emportait sur les sélecteurs de types imbriqués.

Les choses deviennent encore plus complexes quand on introduit des IDs. De même que p:not(.foo) revient à peu près à ajouter .notFoo à tous les éléments <p>, de même p:not(#bar) revient à ajouter #notBar à tous les éléments <p>. Par exemple si nous avons :

p:not(#foo) { color: green; }
p.bar { color: red; }

...de quelle couleur pensez-vous que sera <p class="bar">? La bonne réponse est vert, pas rouge.

Bien que notre élément positif et sa classe soient déclarés après dans le CSS, nous avons ajouté pour ainsi dire un ID à l’élément à partir de la règle :not !

Utiliser :not

Cet effet de :not m’a amenée à repensé la façon dont je l’utilisais. Nous croyons contourner le besoin d’écrire des règles spécifiques pour en écraser d’autres, comme dans notre premier exemple, mais en réalité :not nous amène à faire quelque chose qui y ressemble, sans que nous nous en apercevions.

Je vais continuer à utiliser :not parce que bien souvent c’est la façon la plus propre d’écrire, mais je le ferai en tenant compte de quelques avertissements :

• Ne jamais l’utiliser avec des IDs, par exemple : :not(#bar)
• Limiter son utilisation aux sélecteurs de type génériques, par exemple div dans div:not(.foo)
• Définir les règles :not le plus en amont possible dans mon CSS de façon à pouvoir les écraser si nécessaire.