La Cascade

Un peu de tout sur CSS, HTML, SVG et JS,traduit du web anglophone
Rechercher

La pseudo-classe de négation

par Shay Howe, 07 novembre 2014, css, pseudo-classes, article original paru le 06 novembre 2014 dans Belly

Parmi les pseudo-classes, il en est une qu'on oublie souvent, c'est :not(). La pseudo-classe de négation peut pourtant s'avérer très utile dans bien des situations, comme l'explique ici Shay Howe.


Il y a quelques semaines, j'ai tweeté un petit bout de CSS que j’utilise fréquemment et j’ai été surpris du retour qu’il a eu — ce qui m’a donné envie de le partager ici aussi. Quel était ce CSS ? Le sélecteur suivant, tout simple :

li:not(:last-child)

Souvent, lorsqu’on travaille sur des listes on souhaite appliquer un style spécifique à tous les éléments li de la liste sauf un, en général le premier ou le dernier. Autrefois j’utilisais le CSS suivant :

li {
  border-bottom: 1px solid #ccc;
}
li:last-child {
  border: none;
}

Le problème avec cette méthode c’est que nous définissons des styles pour finalement les écraser avec un sélecteur de spécificité supérieure — dans notre cas en ajoutant la pseudo–classe :last-child. Ce faisant, nous donnons du travail supplémentaire à notre navigateur et nous ralentissons le rendu de ces styles.

Plutôt que de se donner du travail inutile et d’écraser nos styles, nous pouvons utiliser la pseudo–classe de négation :not() en association avec une autre pseudo-classe structurelle ou basée sur la position, le plus fréquemment ce sera :first-child ou :last-child pour cibler plus précisément l’application de nos styles. Notre CSS plus performant ressemblerait à ceci :

li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

Voici le code en action sur CodePen :

Ici, nous n’écrasons pas de styles précédents puisque nous n’appliquons de styles qu’aux éléments voulus. De plus, la compatibilité navigateurs est la même puisque :not(), :first-child et :last-child ont la même compatibilité.

Si vous utilisez une classe .dernier ou des pseudo–classes structurelles ou de position, je vous recommande de passer à la pseudo–classe de négation :not(). Je l’utilise depuis un certain temps maintenant et je me rends compte qu’elle m’a servi dans des situations compliquées et m’a aidé à écrire un CSS plus performant.

Si vous avez des commentaires ou des questions, n’hésitez pas à me contacter par Twitter, je serais ravi de connaître votre façon d’utiliser la pseudo–classe de négation.

Autres ressources externes

Articles de Shay Howe traduits dans La Cascade

Voir la page de Shay Howe et la liste de ses articles dans La Cascade.
Article original paru le 06 novembre 2014 dans Belly
Traduit avec l'aimable autorisation de Belly et de Shay Howe.
Copyright Belly © 2011