web-dev-qa-db-fra.com

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

J'essaie d'appliquer une couleur d'arrière-plan lorsqu'un 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 aussi a "reMode_selected"

Remarque: je ne peux utiliser que le CSS, pas le javascript, car je travaille dans un environnement limité.

Pour clarifier, mon objectif est de colorer le premier élément en 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 mal?

CSS

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

.reMode_hover:hover 
{
   background-color: #f0ac00;
}
htmlcsscss-selectors
118
masato-san

Une solution consiste à utiliser le sélecteur de classes multiples (sans espace car c'est le sélecteur de descendant):

.reMode_selected.reMode_hover:hover 
{
    background-color: transparent;
}

http://jsfiddle.net/geatR/

Une autre solution consisterait à utiliser le sélecteur :not()

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

http://jsfiddle.net/geatR/1/

209
Explosion Pills

Dans les navigateurs modernes, vous pouvez faire:

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

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

24
imsky

Méthode 1

Le problème avec votre code est que vous sélectionnez le .remode_hover qui est un descendant de .remode_selected. La première partie du bon fonctionnement de votre code consiste donc à supprimer cet espace.

.reMode_selected.reMode_hover:hover

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

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

violon

Méthode 2

Une autre méthode consisterait à utiliser :not(), comme indiqué par d'autres. Cela renverra tout élément dont la classe ou la propriété ne figure pas entre parenthèses. Dans ce cas, vous mettriez .remode_selected dedans. Cela ciblera tous les éléments qui n'ont pas de classe de .remode_selected

violon

Cependant, je ne recommanderais pas cette méthode, car elle a été introduite dans CSS3. Le support du navigateur n’est donc pas idéal.

Méthode 3

Une troisième méthode consisterait à utiliser jQuery. Vous pouvez cibler le sélecteur .not(), ce qui serait similaire à l'utilisation de :not() en CSS, mais avec une bien meilleure prise en charge du navigateur.

violon

11
Cody Guldner