Pseudo-classe CSS :not() - Apprendre CSS

La pseudo-classe CSS :not() sélectionne chaque élément qui ne correspond pas au sélecteur qui lui est passé en argument. Comme elle inverse une correspondance, on l'appelle aussi la pseudo-classe de négation.

Cette page explique ce que fait :not(), quand l'utiliser, comment elle affecte la spécificité, ainsi que les pièges courants — avec des exemples modifiables.

Qu'est-ce que `:not()`

:not() est une pseudo-classe fonctionnelle : elle prend un sélecteur en argument et correspond à tout élément que cet argument ne sélectionne pas. Les arguments supportés sont :

Le sélecteur de type (p. ex., p, span)
Le sélecteur de classe (p. ex., .element)
Le sélecteur d'ID (p. ex., #header)
Le sélecteur de pseudo-classe (p. ex., :last-child, :first-of-type)
Le sélecteur d'attribut (p. ex., [type="text"])
Le sélecteur universel (*)

Avec Selectors Level 3, l'argument devait être un seul sélecteur simple. Selectors Level 4 l'a étendu pour accepter une liste séparée par des virgules ainsi que des sélecteurs composés ou complexes ; vous pouvez ainsi écrire :not(.a, .b) ou :not(ul li.first) dans les navigateurs modernes.

Quand l'utiliser

Utilisez :not() lorsqu'il est plus court de décrire ce que vous voulez exclure plutôt que de lister tout ce que vous voulez inclure :

Styliser chaque élément de liste sauf le dernier : li:not(:last-child).
Styliser chaque lien qui n'est pas externe : a:not([target="_blank"]).
Ajouter un espacement entre des éléments frères sans marge finale : .item:not(:first-child) { margin-top: 1rem; }.
Désactiver le style pour une variante : .btn:not(.btn-ghost) { background: #8ebf42; }.

Remarques importantes

Le sélecteur :not() fonctionne avec les pseudo-classes, mais ne supporte pas les pseudo-éléments.
Le mot-clé :not() lui-même n'ajoute aucune spécificité — seul son argument le fait. Ainsi, :not(.foo) a la même spécificité que .foo (0, 1, 0), et un simple :not(p) a le même poids que p (0, 0, 1). Cela rend :not() moins coûteux qu'une classe supplémentaire équivalente, ce qui peut surprendre lors des conflits de surcharge.
:not(.foo) correspond à tout ce qui n'est pas .foo, y compris <html> et <body>. Associez-le toujours à un contexte tel que ul li:not(.foo) pour éviter qu'il ne s'applique à tout le document.
Le sélecteur :not() s'applique à tous les éléments qui ne correspondent pas à l'argument, pas uniquement à un seul élément.
Un :not() vide — :not() sans rien à l'intérieur — est invalide et toute la règle est ignorée.

Version

Selectors Level 3

Selectors Level 4

Syntaxe

Syntaxe CSS de :not()

selector:not(argument) {
  css declarations;
}

Exemple de la pseudo-classe :not() :

Exemple de code CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, on dispose d'une liste non ordonnée avec une classe unique sur la balise <li>.

Exemple de la pseudo-classe :not() avec la balise `<li>` :

Autre exemple de code CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Passer une liste de sélecteurs (Selectors Level 4)

Les navigateurs modernes vous permettent d'exclure plusieurs sélecteurs à la fois en les séparant par des virgules à l'intérieur d'un seul :not(). La règle ci-dessous colore chaque élément de liste sauf l'élément atténué et l'élément actif :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #8ebf42;
      }
      li:not(.muted, .active) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>:not() with a selector list</h2>
    <ul>
      <li>Highlighted item</li>
      <li class="muted">Muted item</li>
      <li class="active">Active item</li>
      <li>Highlighted item</li>
    </ul>
  </body>
</html>

Cela est équivalent à l'ancienne syntaxe plus verbeuse li:not(.muted):not(.active), que vous pouvez utiliser si vous avez besoin de supporter de très anciens navigateurs.

Sélecteurs associés

CSS Selectors — la référence complète des types de sélecteurs.
:first-child et :last-child — à combiner avec :not() pour des astuces d'espacement.
:nth-child() — une autre façon de cibler un sous-ensemble d'éléments frères.

Exercice

Pratique

Que fait la pseudo-classe :not() en CSS ?

Elle représente un élément qui n'est pas représenté par son argumentElle est utilisée pour spécifier un attribut particulier d'un élémentElle sélectionne tous les éléments qui ne sont pas l'élément spécifiéElle est l'opposé de la pseudo-classe :has

Qu'est-ce que :not()