Exclusion de noms de classe spécifiques dans CSS SELECTORS

Dans CSS, il y a des instances où vous pourrez avoir besoin d'exclure des noms de classe particuliers de vos sélecteurs. Ceci est particulièrement utile lorsque vous souhaitez appliquer des styles à plusieurs éléments, mais certains ne doivent pas hériter de ces styles.

Un scénario commun implique l'exclusion d'éléments avec un nom de classe spécifique tout en appliquant des styles aux éléments avec un autre nom de classe. Considérons l'exemple suivant:

    Design



    Design

Dans cet exemple, nous voulons appliquer une couleur d'arrière-plan aux éléments avec le nom de classe "Remode_hover" sur Hover. Cependant, nous ne voulons pas appliquer cette couleur si l'élément a également le nom de classe "Remode_Selected".

/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

.reMode_hover:hover { background-color: #f0ac00; }

Bien que vous puissiez vous attendre à ce que la première règle fonctionne, ce n'est pas le cas. En effet, dans CSS, l'espace entre les noms de classe désigne le sélecteur descendant. Ainsi, ".remode_selected .remode_hover" se traduit par "sélectionner .remode_hover éléments qui sont des descendants de .remode_selected". "

pour exclure le sélecteur" Remode_selected ", nous devons utiliser le sélecteur" non () ". Le CSS mis à jour serait:

.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }

Cette règle appliquera la couleur d'arrière-plan aux éléments .remode_hover qui n'ont pas le nom de classe .remode_selected. En conséquence, seul le premier lien recevra la couleur d'arrière-plan sur plané, tandis que le deuxième lien ne le fera pas.