Estou tentando aplicar a cor de fundo quando um mouse de usuário passa o mouse sobre o elemento cujo nome da classe é "reMode_hover".

Mas não quero mudar de cor se o elemento também tiver"reMode_selected"

Nota: Só posso usar CSS e não javascript porque estou trabalhando em algum tipo de ambiente limitado.

Para esclarecer, meu objetivo é colorir o primeiro elemento em foco, mas não o segundo.

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>

Eu tentei abaixo esperando que a primeira definição funcionasse, mas não é. O que estou fazendo de errado?

CSS

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

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

Uma maneira é usar o seletor de várias classes (sem espaço, pois é o seletor descendente):

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

<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>

Nos navegadores modernos, você pode:

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

Consulte http://caniuse.com/css-sel3 para obter informações de compatibilidade.

Método 1

O problema com o seu código é que você está selecionando o .remode_hoverque é um descendente de .remode_selected. Portanto, a primeira parte de fazer seu código funcionar corretamente é removendo esse espaço

.reMode_selected.reMode_hover:hover

Então, para que o estilo não funcione, você deve substituir o estilo definido pelo :hover. Em outras palavras, você precisa contrariar a background-colorpropriedade. Portanto, o código final será

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

Violino

Método 2

Um método alternativo seria usar :not(), como declarado por outros. Isso retornará qualquer elemento que não tenha a classe ou propriedade declarada entre parênteses. Nesse caso, você colocaria .remode_selectedlá. Isso terá como alvo todos os elementos que não têm uma classe de.remode_selected

Violino

No entanto, eu não recomendaria esse método, devido ao fato de ter sido introduzido no CSS3, portanto, o suporte ao navegador não é o ideal.

Método 3

Um terceiro método seria usar o jQuery. Você pode segmentar o .not()seletor, que seria semelhante ao uso :not()em CSS, mas com suporte ao navegador muito melhor

Violino