Apply color to font in element clicked only with CSS

Asked

Viewed 10,036 times

7

I have the following HTML:

<div class="trabalheSubEsqTitulo">Fale Conosco</div>

When I click on the div trabalheSubEsqTitulo, I want him to apply color:red, however, I only want this with CSS.

Can do?

css

  • Never tested, but try the following: .trabalheSubEsqTitulo:active{ color: red; }

  • Need to be div or can be another element?

  • @Felipe wants it to stay after the right click?

  • @Exact jorgeb. keep color after click.

  • 1

    @Felipestoker or uses the solution of bfavaretto or use JS.

4 answers

11


With div I don’t know if it’s possible, but with an anchor you can use the pseudo-class :target, thus:

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

The identifier in href needs to be unique, and match the id of each item. The rule of :visited is to keep the blue in the already clicked links. Beware that this rule needs to come before the other in CSS.

The :target works like this: if the current URL of the document has a hash (#qualquer-coisa) equal to the ID of an element, this element is the :target. In our example, by clicking on each link we define the hash of the document as the ID of that same link. It is then selected by :target stated in the CSS.

  • I would add just one .trabalheSubEsqTitulo:visited { color: blue; } CSS to keep the original color when not selected.

  • I have incorporated your suggestion :)

5

You can do this using the pseudo-selector :active, but the effect only stays while clicking/pressing the mouse. To keep the class I really think only with Javascript.

.trabalheSubEsqTitulo:active {
    color:red
}
<div class="trabalheSubEsqTitulo">Fale Conosco</div>

There is another way which is to use a checkbox as a flag... Joining a label with the attribute for="check" (that points to the checkbox ID) and hiding the checkbox, we can do so: 

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>

  • I don’t think that’s what he wants...

  • 2

    @Jorgeb so... then I guess only even with JS.

  • 1

    Exactly, I would like it to stay the color after the click, only with CSS not as then?

  • 1

    @Felipestoker added another solution :)

4

Another way would be to use the attribute tabindex, example:

.trabalheSubEsqTitulo:focus {
  color: red;
  outline: none;
}
<div class="trabalheSubEsqTitulo" tabindex="0">Fale Conosco</div>

The downside of this solution is that it works with the state of phocus, that is if you shift the focus to any other element, yours will lose the red color.

For a bullet-proof and 100% efficient solution, the use of Javascript is still required.

2

I don’t know how to keep the color only with CSS after clicking, however, to keep the color after the click should be a link and the selector would be :visited

To set the color when clicked would look like this:

.trabalheSubEsqTitulo:active {
    color:red;
}

Demontraction Fiddle:

.trabalheSubEsqTitulo:active {
    color:red;
}
<div class="trabalheSubEsqTitulo">Fale Conosco</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.