Button will not change color (HTML5)

Question

I have three buttons that act much like radio buttons - where only one can be selected at one time:

<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>

For the normal, unselected state, all the buttons use a gradient background:

#btn-bronze
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    width: 33%;
    height: 100%;
}

#btn-silver
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    width: 33%;
    height: 100%;
}

#btn-gold
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    width: 33%;
    height: 100%;
}

When selected, the selected button should add this class to modify the background color:

.blue-selected
{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}

This is done using jQuery in the method that is called when the body loads:

$("#btn-bronze").click(function() 
{

    console.log("bronze");
    $(this).addClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-silver").click(function() 
{
    console.log("silver");
    $("#btn-broze").removeClass('blue-selected');
    $(this).addClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-gold").click(function() 
{
    console.log("gold");
    $("#btn-broze").removeClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $(this).addClass('blue-selected');
});

When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? Here is the fiddle .

Answer 1

I would fix a couple of things.

Use class instead of ID targeting. I left the IDs in, but you don't really need them now:

<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>

Then I would use these styles. This way I could add more buttons without creating new styles:

 .btn
 {
   float: left;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
   width: 33%;
   height: 100%;
}

.btn:first-child {
   -webkit-border-top-left-radius: 6px;
   -webkit-border-bottom-left-radius: 6px;
}

.btn:last-child {
   -webkit-border-top-right-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
}

.btn.blue-selected
{
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}

Finally, I would simplify the hell out of the javascript:

$(".btn").click(function () {
    $(".btn").removeClass("blue-selected");
    $(this).addClass('blue-selected');
});

http://jsfiddle.net/4ZygH/1/

Answer 2

#btn-bronze has a higher specificity than .blue-selected , so its background takes precedence.

You can get around this by using !important , but that's probably not the best solution.

The most reliable would be if the parent element also has an ID, then you can select #parent-element>.blue-selected and get a higher specificity.

Answer 3

A ID selector have a more priority then an class selector. You could use important in your css code.