add class "selected"

Question

hello guys i have the following script:

$(document).ready(function () {
        $('.shoppers-images ul li').click(function () {
            $('.shoppers-images ul li').removeClass('selected');
            $(this).addClass('selected');
        });
    });

this works as i wish... but i am sure that the css is wrong because it is overwriting some declared values .. and the .selected class will never show

#foot-transport{
    background: url(../img/css/register-runner.png) no-repeat;
    background-position: center center;
    margin-right: 20px;
}
#bicycle-transport{
    background: url(../img/css/register-bycicle.png) no-repeat;
    background-position: center center;
}
#van-transport{
    background: url(../img/css/register-van.png) no-repeat;
    background-position: center center;
    margin-left: 20px;
}
 .selected{
   background: url(../img/css/checked-image.png) no-repeat;
   background-position: center center;
}

this is my html:

<div class="span7 shoppers-images">
                <ul>
                    <a href="#"><li id="foot-transport"><span>Individual</span></li></a>
                    <a href="#"><li id="bicycle-transport"><span>Pro Driver/Courier</span></li></a>
                    <a href="#"><li id="van-transport"><span>A Delivery </span></li></a>
                </ul>
            </div> 

the question is: how can i declare my "selected" class in css so that it will be stronger?

Answer 1

CSS ID selectors take precedence over classname selectors. You can use the !important rule:

.selected{
   background: url(../img/css/checked-image.png) no-repeat !important;
   background-position: center center;
}