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.

Answer 1

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.