La pseudo-classe de négation

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.

Par

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 :

See the Pen The Negation Pseudo-class by Shay Howe (@shayhowe) on 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.


Intéressé par CSS ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans le blog de Belly.

Sur l’auteur : est designer et intégrateur web, il est passionné par les produits créatifs et intuitifs. Spécialisé dans le développement d’interface, il écrit et donne des conférences sur ce sujet. Shay est l’auteur du site Learn to code HTML & CSS, l’une des meilleures ressources disponibles pour apprendre HTML et CSS en ligne (gratuit, en anglais).

Traduit avec l’aimable autorisation de Belly et de l’auteur.
Copyright Belly © 2014.