Eu tenho o seguinte HTML:
<div class="trabalheSubEsqTitulo">Fale Conosco</div>
Quando eu clicar na div trabalheSubEsqTitulo
, quero que ele aplique color:red
, porém, quero isso somente com CSS.
Tem como fazer?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeCom div não sei se é possível, mas com uma âncora você pode usar a pseudo-classe :target
, assim:
.trabalheSubEsqTitulo:visited { color: blue; }
.trabalheSubEsqTitulo:target { color: red; }
<a id="nome-unico" href="#nome-unico" class="trabalheSubEsqTitulo">teste 1</a>
<a id="outro-nome-unico" href="#outro-nome-unico" class="trabalheSubEsqTitulo">teste 2</a>
O identificador no href
precisa ser único, e coincidir com o id
de cada item. A regra do :visited
é para manter o azul nos links já clicados. Cuidado que essa regra precisa vir antes da outra no CSS.
O :target
funciona assim: se a URL atual do documento possui um hash (#qualquer-coisa
) igual ao ID de um elemento, esse elemento é o :target
. No nosso exemplo, ao clicar em cada link definimos o hash do documento como o ID desse mesmo link. Ele então passa a ser selecionado pelo :target
declarado no CSS.
.trabalheSubEsqTitulo:visited { color: blue; }
no CSS para manter a cor original quando não estivesse selecionado.
Pode fazer isso usando o pseudo-seletor :active
, porém o efeito só fica enquanto estiver a carregar/pressionar o rato. Para manter a classe acho mesmo que só com JavaScript.
.trabalheSubEsqTitulo:active {
color:red
}
<div class="trabalheSubEsqTitulo">Fale Conosco</div>
Existe uma outra maneira que é usar uma checkbox como uma flag... Juntando um label com o atributo for="check"
(que aponta para a ID da checkbox) e escondendo a checkbox, podemos fazer assim:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
color: red;
}
<input type="checkbox" id="check" />
<label for="check" class="trabalheSubEsqTitulo">Fale Conosco</label>
Uma outra forma seria utilizando o atributo tabindex
, exemplo:
.trabalheSubEsqTitulo:focus {
color: red;
outline: none;
}
<div class="trabalheSubEsqTitulo" tabindex="0">Fale Conosco</div>
O lado ruim desta solução é que ele trabalha com o estado de focus, ou seja se você mudar o foco para qualquer outro elemento, o seu perderá a cor vermelha.
Para uma solução a prova de balas e 100% eficiente, ainda é necessário o uso de JavaScript.
Desconheço manter a cor apenas com CSS após clicar, porém, para manter a cor após o clique deveria ser um link e o seletor seria :visited
Para setar a cor quando clica ficaria assim:
.trabalheSubEsqTitulo:active {
color:red;
}
Demontração Fiddle:
.trabalheSubEsqTitulo:active {
color:red;
}
<div class="trabalheSubEsqTitulo">Fale Conosco</div>
.trabalheSubEsqTitulo:active{ color: red; }