Jak wykluczyć określoną nazwę klasy w selektorze CSS?

Question

Próbuję zastosować kolor tła, gdy mysz użytkownika znajduje się na elemencie, którego nazwa klasy to "reMode_hover".

Ale nie chcę zmienić kolor, jeśli element również ma "reMode_selected"

Uwaga: można używać tylko CSS JavaScript ponieważ nie pracuję w zasięgu jakiejś ograniczonym środowisku.

Celem wyjaśnienia, moim celem jest pokolorowanie pierwszego elementu na zawisie, ale nie drugi element.

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> 

Próbowałem poniżej nadzieję, że pierwsza definicja będzie działać, ale tak nie jest. Co ja robię źle?

CSS

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

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

Answer 1

Jednym ze sposobów jest wykorzystanie wielokrotnego wyboru klasy (nie ma miejsca jak to jest selektor potomka):

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

http://jsfiddle.net/geatR/

Innym byłoby użyj selektora :not() selektor

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

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

Answer 2

W nowoczesnych przeglądarek można zrobić:

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

Consult http://caniuse.com/css-sel3 do informacji kompatybilności.

Answer 3

Metoda 1

Problem z kodem jest to, że jesteś wyborze .remode_hover który jest potomek z .remode_selected. Tak więc pierwsza część zaczyna swój kod działał poprawnie jest usunięcie tego miejsca

.reMode_selected.reMode_hover:hover 

Następnie, w celu uzyskania styl nie działa, trzeba przesłonić styl ustawiony przez :hover. Innymi słowy, musisz odrzucić właściwość background-color. Tak więc końcowy kod będzie

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

Fiddle

Metoda 2

Alternatywnym sposobem byłoby wykorzystanie :not(), jak stwierdzono przez innych. Zwróci to dowolny element, który nie ma klasy lub właściwości podanej w nawiasie. W takim przypadku umieścisz tam .remode_selected.Pozwoli to objąć wszystkie elementy, które nie mają klasę .remode_selected

Fiddle

Jednak nie polecam tej metody, ze względu na fakt, że został on wprowadzony w CSS3, więc wsparcie przeglądarka nie jest idealny.

Metoda 3

Trzecią metodą byłoby użycie jQuery. Możesz kierować selektor .not(), który byłby podobny do korzystania :not() w CSS, ale o wiele lepsze wsparcie przeglądarki

Fiddle