Come escludere un particolare nome di classe nel selettore CSS?

Question

Sto provando ad applicare colore di sfondo quando un mouse utente passa sopra l'elemento il cui nome classe è "reMode_hover".

Ma io non voglio cambiare colore se l'elemento ha anche"reMode_selected"

Nota: posso solo usare i CSS non javascript perché sto lavorando all'interno di una sorta di ambiente limitato.

Per chiarire, il mio obiettivo è colorare il primo elemento al passaggio del mouse ma non il secondo elemento.

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> 

ho cercato qui di seguito sperando che la prima definizione avrebbe funzionato, ma non lo è. Che cosa sto facendo di sbagliato?

CSS

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

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

Answer 1

Un modo è quello di utilizzare il selettore di classe multipla (nessuno spazio come quello è il selettore discendente):

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

http://jsfiddle.net/geatR/

Un altro sarebbe quello di utilizzare il selettore :not()

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

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

Answer 2

nei browser moderni si può fare:

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

Consult http://caniuse.com/css-sel3 per informazioni sulla compatibilità.

Answer 3

Metodo 1

Il problema con il codice è che si sta selezionando il .remode_hover che è un discendente di .remode_selected. Così la prima parte di ottenere il codice per funzionare correttamente è rimuovendo quello spazio

.reMode_selected.reMode_hover:hover 

Poi, al fine di ottenere lo stile di non lavorare, si deve ignorare lo stile impostato dal :hover. In altre parole, è necessario contrastare la proprietà background-color. Quindi il codice finale sarà

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

Fiddle

Metodo 2

Un metodo alternativo sarebbe usare :not(), come già detto da altri. Ciò restituirà qualsiasi elemento che non ha la classe o la proprietà dichiarate all'interno della parentesi. In questo caso, inseriresti .remode_selected.Questo riguarderà tutti gli elementi che non hanno una classe di .remode_selected

Fiddle

Tuttavia, io non consiglierei questo metodo, a causa del fatto che è stato introdotto in CSS3, quindi il supporto del browser non è l'ideale.

Metodo 3

Un terzo metodo sarebbe usare jQuery. È possibile indirizzare il selettore .not(), che sarebbe simile ad usare :not() in CSS, ma con molto migliore supporto del browser

Fiddle