La pseudo-classe :not() de CSS

La pseudo-classe :not() représente les éléments qui ne correspondent pas à une liste de sélecteurs.

Elle est également connue sous le nom de pseudo-classe de négation. C'est un sélecteur de pseudo-classe fonctionnelle qui prend une liste de sélecteurs en argument et correspond à tout élément qui ne correspond pas à cet argument. Dans le niveau 3 des sélecteurs, elle n'accepte que des sélecteurs simples. Le niveau 4 permet des sélecteurs composés ou complexes. Les arguments pris en charge incluent :

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

Notes importantes

Le sélecteur :not() fonctionne avec les pseudo-classes, mais ne prend pas en charge les pseudo-éléments.
La spécificité de :not() est déterminée par le sélecteur le plus spécifique dans son argument. Par exemple, :not(.foo) a la même spécificité que .foo (0, 1, 0).
:not(.foo) correspond à tout ce qui n'est pas .foo, y compris <html> et <body>.
Le sélecteur :not() s'applique à tout élément qui ne correspond pas à l'argument, et non pas à un seul élément.

Version

Sélecteurs Niveau 3

Sélecteurs Niveau 4

Syntaxe

Syntaxe CSS :not()

css

selector:not(argument) {
  css declarations;
}

Exemple de la pseudo-classe :not() :

Exemple de code CSS :not()

html

<!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>

Try it Yourself »

Dans l'exemple suivant, il y a une liste non ordonnée avec une seule classe sur la balise <li>.

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

Autre exemple de code CSS :not()

html

<!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>

Try it Yourself »

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 pour un élémentElle sélectionne chaque élément qui n'est pas l'élément spécifiéC'est l'inverse de la pseudo-classe :has

La pseudo-classe :not() de CSS ​

Notes importantes ​

Version ​

Syntaxe ​

Exemple de la pseudo-classe :not() : ​

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