Editar link atual em Css

Front-end CSS
#1

Eu tenho links com a cor A e quero mudar para a cor B aqueles que são da página atual.
Uso a classe ‘current’ no link da página atual pra isso, mas por que eu coloquei a cor A no link fora da classe current, o css irá deixá-lo sempre com a cor A.

nav a{
    color: var(--cor-A);
}
.current {
    color: var(--cor-B);
    background: var(--cor-C);
}

Na classe ‘current’ quando eu mudo a cor do background funciona, mas quando mudo a do texto pra B não, pois coloquei a cor dele como A fora da classe.

Como mudar a cor do link para B no link atual, mesmo tendo mudado ela para A antes?

#2

Acredito que seja problema de especificidade.

nav a é mais específico do que apenas .current. Experimente fazer o seguinte:

nav .current { /* ... */ } 

/* ou */

nav a.current { /* ... */ }
#3

Pior que não é, pois na mesma especifidade eu mudo a cor do background e funciona, mas a cor da letra não funciona pois eu já configurei com outra cor antes.

#4

Fiz um teste e não vi problema algum:

https://jsfiddle.net/mey12fu0/2/

1 curtida
#5

Cara, realmente. Valeu pelo teste!
Eu atualizei com meu código e não funciona:

https://jsfiddle.net/mey12fu0/12/

Sabe me dizer onde estou errando?

#6

Agora entendi melhor. Fiz uma modificação. Ficou assim:

#nav-left .current {
  color: var(--cor-aa);  
  background: var(--cor-cc);
}

Veja: https://jsfiddle.net/mey12fu0/17/

2 curtidas
#7

Puts, valeu @wldomiciano! Kudos!

1 curtida