I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".

But I do not want to change color if the element also has "reMode_selected"

Note: I can only use CSS not javascript because I'm working within some sort of limited environment.

To clarify, my goal is to color the first element on hover but not the second element.

HTML

<a href="" title="Design"> <span>Design</span>
</a>
<a href="" title="Design"> <span>Design</span>
</a>

I tried below hoping the first definition would work but it is not. What am I doing wrong?

CSS

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

3 Answers

One way is to use the multiple class selector (no space as that is the descendant selector):

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

<a href="" title="Design"> <span>Design</span>
</a>
<a href="" title="Design"> <span>Design</span>
</a>

In modern browsers you can do:

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

Consult for compatibility information.

Method 1

The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected. So the first part of getting your code to work correctly is by removing that space

.reMode_selected.reMode_hover:hover

Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-color property. So the final code will be

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

Fiddle

Method 2

An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don't have a class of .remode_selected

Fiddle

However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.

Method 3

A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support

Fiddle