Comment exclure un nom de classe particulier dans un sélecteur CSS ?

Question

J'essaie d'appliquer une couleur d'arrière-plan lorsque la souris de l'utilisateur survole l'élément dont le nom de classe est "reMode_hover" .

Mais je ne veux pas changer de couleur si l'élément également a "reMode_selected"

Note : Je ne peux utiliser que des CSS et non javascript car je travaille dans un environnement limité.

Pour clarifier, mon objectif est de colorer le premier élément au survol mais pas le second.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

J'ai essayé ci-dessous en espérant que la première définition fonctionnerait mais ce n'est pas le cas. Qu'est-ce que je fais de mal ?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

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

Answer 1

Une façon de procéder est d'utiliser le sélecteur de classes multiples (sans espace car il s'agit du sélecteur descendant) :

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

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Answer 2

Dans les navigateurs modernes, vous pouvez le faire :

.reMode_hover:not(.reMode_selected):hover{}

Consultez http://caniuse.com/css-sel3 pour des informations sur la compatibilité.

Answer 3

Méthode 1

Le problème avec votre code, c'est que vous sélectionnez l'option .remode_hover qui est un descendant de .remode_selected . Donc, pour que votre code fonctionne correctement, il faut d'abord supprimer cet espace.

.reMode_selected.reMode_hover:hover

Ensuite, pour que le style ne fonctionne pas, vous devez remplacer le style défini par la fonction :hover . En d'autres termes, vous devez contrer le background-color propriété. Le code final sera donc

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

Violon

Méthode 2

Une méthode alternative serait d'utiliser :not() comme d'autres l'ont dit. Cela renverra tout élément qui n'a pas la classe ou la propriété indiquée entre parenthèses. Dans ce cas, vous devez mettre .remode_selected là-dedans. Cela ciblera tous les éléments qui n'ont pas une classe de .remode_selected

Violon

Toutefois, je ne recommanderais pas cette méthode, car elle a été introduite dans CSS3, et la prise en charge par les navigateurs n'est donc pas idéale.

Méthode 3

Une troisième méthode serait d'utiliser jQuery. Vous pouvez cibler le .not() ce qui reviendrait à utiliser le sélecteur :not() en CSS, mais avec une bien meilleure prise en charge par les navigateurs

Violon