:not()

La propriété CSS :not() est une pseudo-classe de négation qui accepte un sélecteur simple comme argument. Grosso modo, n'importe quel élément.

:not cible un élément qui n'est pas représenté par l'argument. L'argument lui-même ne doit pas contenir d'autres sélecteurs ou pseudo-éléments.

Voyez cette démo :

See the Pen :not(X) by Dennis Gaebel (@grayghostvisuals) on CodePen.

//CSS
/* L'argument X peut être remplacé par n'importe quel sélecteur */
:not(X) {
  propriété: valeur;
}

Dans cet exemple, nous avons une liste non ordonnée avec une classe sur un élément unique <li> :

//HTML
<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

Le CSS qui suit sélectionne tous les éléments <li> à l'exception de celui (ou ceux) qui auraient une classe .different.

//CSS
/* Appliquer un style à tous les li, sauf à ceux ayant la classe .different */
li:not(.different) {
  font-size: 3em;
}

Vous pourriez faire la même chose en utilisant des pseudo-classes considérées comme des sélecteurs simples.

//CSS
p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

Par contre, si nous utilisons un pseudo-élément comme argument, ça ne produira pas l'effet escompté.

//CSS
:not(::first-line) { /* ::first-line est un pseudo-élément et non un sélecteur simple */
  color: white;
}

La spécificité de la pseudo-classe not() est celle de son argument. La pseudo-classe not() n'ajoute rien à la spécificité du sélecteur, contrairement aux autres pseudo-classes.

Les négations ne peuvent être imbriquées, il est interdit d'écrire par exemple :not(/not(...)). À noter que les pseudo-éléments n'étant pas des sélecteurs simples, ils ne sont pas des arguments valides de :not(). Il est possible d'enchaîner plusieurs sélecteurs :not().


À lire également dans La Cascade :

La pseudo-classe de négation, par Shay Howe
Combinateurs et pseudo-classes, par Steven Bradley
Quantity queries pour CSS, de Heydon Pickering

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Les Sélecteurs, par Yoyodesign. Voir le point 5.2 "la syntaxe des sélecteurs" pour plus d'information sur les sélecteurs simples.


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.