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 :

voir La pseudo-classe de négation par Shay Howe 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.