Question

Am having several boxes(more than 100) that will create dynamically with

<div id="window5"></div>
<div id="window18"></div>
<div id="window190"></div>

there will be some default different colours present in different boxes based on database conditions.
Now If i click on one box the colour should be gray,then if i click on the other box the colour should be changed to red(the first box colour should come to normal).I can get the gray colour(onclick) only when my default colour is not present.
If some colours are present the gray colour gets hided under the original default colours.
Is there any css property to resolve this.

My css file:

.selected{
    background-color: red;
}

used javasscript code as;

    $(document).ready(function () {
        $("div[id *= 'window']").live('click', function (e) {

           $(".selected").removeClass("selected");
            $(this).addClass("selected");
            e.stopPropagation();
        });
        $(document).click(function () {
            $(".selected").removeClass("selected");
        });
    });       

</script>

Answer 1

If you already specify a background colour within a stylesheet then that is likely taking precedence. To overcome this you could either use inline styles or the !important directive.

background-color:red!important;