Can't change color with a css class

Question

Sorry if this is too basic, css confuses me.

So I have this "button":

<div class="col-md-12 bloque izq boton-tarjetas" onclick="mostrarTarjetas()">
    <p class="titulo2">- Tarjetas de Invitacion</p>
</div>

That button uses this css class:

.boton-tarjetas {
    cursor: pointer;
    background-color: #508365;
}

And when hovered over the button, the backgound-color property changes using this css class:

.boton-tarjetas:hover, .boton-activo {
    background-color: #30513d;
}

If the button es clicked, this js function triggers an accordion:

function mostrarTarjetas() {
    $('.contenido-tarjetas').slideToggle();
    $('.boton-tarjetas').toggleClass('boton-activo');
}

And that very same js function adds the boton-activo class to the button.

All that is working wonderfully, the problem is that the button should change color when hovered over (which is working) and when is clicked it should stay that color due to the added class on the js function.

If i check on the devtools, the boton-activo class is working, but it's being overwritten by the background-color property of the boton-tarjetas class.

Please help me.

@TheDarkKnight !important is almost always an avoidable hack, best not to recommend it :-) — TylerH
– TylerH, Commented Aug 9, 2018 at 20:13

Rory McCrossan · Accepted Answer · 2018-08-09 20:02:44Z

7

The issue is due to selector precedence. You need to make the .boton-activo class more specific so that it overrides any previous styles:

.boton-tarjetas {
  cursor: pointer;
  background-color: #508365;
}

.boton-tarjetas:hover, 
.boton-tarjetas.boton-activo { /* note additional class selector here */
  background-color: #30513d;
}

Note that the !important flag is another possible solution, but that should be avoided unless there is absolutely no alternative.

answered Aug 9, 2018 at 20:02

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Temani Afif Over a year ago

using this order you don't need to add another class ... the last one will win since they have same specificity

Rory McCrossan Over a year ago

@TemaniAfif that's true, but I find it's better to be explicit just in case someone rearranges your CSS files :)

Temani Afif Over a year ago

Ok, but you may create confusion saying that the issue is precedence with that order ... I would probably explain it differently and say that it's better to add another class to be sure it will work whataver the order is.

Danielprabhakaran N · Accepted Answer · 2018-08-09 20:58:28Z

0

selector need to be more specific

HTML:

<div class="col-md-12 button-target">
<p class="title">accordian Title</p>
<div class="content-target">
There are many variations of passages of Lorem Ipsum available, but the  majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</div>
</div>

CSS:

.button-target {
   cursor: pointer;
   background-color: #508365;
 } 
.button-target:hover, .button-target.button-active {
  background-color: #30513d;
 }

SCRIPT:

$('.button-target').click(function() {
   $('.content-target').slideToggle();
   $('.button-target').toggleClass('button-active');

});

https://jsfiddle.net/Danielprabhakaran_N/xpvt214o/581603/

edited Aug 9, 2018 at 20:58

answered Aug 9, 2018 at 20:34

Danielprabhakaran N

5851 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

Can't change color with a css class

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related