Как исключить конкретное имя класса в селекторе CSS?

Я пытаюсь применить фоновый цвет, когда пользовательская мышь навевает элемент, чье имя класса "reMode_hover".

Но я не хочу менять цвет, если элемент также имеет "reMode_selected"

Примечание. Я могу использовать CSS не javascript, потому что я работаю в какой-то ограниченной среде.

Чтобы уточнить, моя цель - раскрасить первый элемент при наведении, но не второй элемент.

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>

Я попробовал ниже, надеясь, что первое определение будет работать, но это не так. Что я делаю неправильно?

CSS

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

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

Ответы

Ответ 1

Один из способов - использовать селектор нескольких классов (без пробела, который является селектором потомков):

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

http://jsfiddle.net/geatR/

Другой вариант - использовать селектор :not()

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

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

Ответ 2

В современных браузерах вы можете:

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

Обратитесь к http://caniuse.com/css-sel3 для информации о совместимости.

Ответ 3

Способ 1

Проблема с вашим кодом заключается в том, что вы выбираете .remode_hover, который является потомком .remode_selected. Итак, первая часть правильной работы вашего кода - это удаление этого пространства

.reMode_selected.reMode_hover:hover

Затем, чтобы стиль не работал, вы должны переопределить стиль, установленный :hover. Другими словами, вам нужно противопоставить свойство background-color. Таким образом, окончательный код будет

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

Fiddle

Способ 2

Альтернативным методом было бы использовать :not(), как указано другими. Это вернет любой элемент, который не имеет класса или свойства, указанного в скобках. В этом случае вы ставите там .remode_selected. Это будет нацелено на все элементы, которые не имеют класса .remode_selected

Fiddle

Однако я бы не рекомендовал этот метод из-за того, что он был введен в CSS3, поэтому поддержка браузера не идеальна.

Способ 3

Третий метод заключается в использовании jQuery. Вы можете настроить таргетинг на селектор .not(), который будет похож на использование :not() в CSS, но с гораздо лучшей поддержкой браузера

Fiddle