Pseudo-classe css :not() multiple

Certes, on ne l'utilise pas tous les jours, mais elle est bien pratique quand même pour régler quelques problèmes en usage avancé.

La pseudo-classe de négation :not() prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument.

Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément. ¹

/* Sélectionne n'importe quel élément qui n'est */
/* pas un paragraphe */
:not(p) {
  /**/
}

Comment exclure plusieurs éléments?

La page MDN prescrit :

La pseudo-classe :not() prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou de pseudo-élément.¹

voici un exemple simple, qui exclut 2 classes du sélecteur <p>.

<body>
  <p class="un">UN</p>
  <p class="deux">DEUX</p>
  <p class="trois">TROIS</p>
  <p class="quatre">QUATRE</p>
</body>

p:not(.un, .deux) {
  color:red;
}

Selon la page MDN, les paragraphes .trois et .quatre devraient être rouges.

Oui mais! Cela fonctionne sur que Safari 13.1 MacOS…

Alors?

Une seconde syntaxe (croisée sur css-tricks ²) existe mais annoncée comme expérimentale (est-ce vraiment celle-ci?) et le site CanIUSe insiste sur l'autre syntaxe (à virgule).

On peut aussi voir sur le tableau, qu'elle n'est pas supportée (c'est ce qu'on vient de vérifier), mais il s'agit de la syntaxe à virgule (level 3), pas la syntaxe chainée (level 4).

caiuse_css_not_list ³

La solution

Si on teste cette syntaxe:

p:not(.un):not(.deux) {
  color: green;
}

Sur MacOS, elle est compatible avec les 3 navigateurs principaux. Elle fonctionne sur:

Safari 13.1 MacOS,
Chrome 81 MacOS,
Firefox 75 MacOS.

Dans cette syntaxe, les paragraphes .trois et .quatre sont les seuls rouges.

Donc on retiendra que pour multiplier les exclusions, il faut chainer la pseudo-classe :not().

element:not(exclusion1)[…]:not(exclusionN)