Question

I’m trying to change the background color by adding a new class with another background color. But the color don’t change. It’s still the same color! Do I have to remove the old background color first? I guess my code should work!?

$(".displayControl a:first").addClass("activeButton");

The css

.displayControl
{
padding: 20px 0 0 0;
float: right;
}

.displayControl a
{
background: #B7BABD;
margin: 0 5px 0 0;
padding: 5px 10px 5px 10px;
color: #ffffff;
}

.activeButton
{
background: #83AEE6;
}

Answer 1

You are being defeated by CSS’s “specificity” rules. The more specific directive is winning the day despite being higher in the style sheet.

Try changing the last directive to :

.displayControl a.activeButton
{
background: #83AEE6;
}