Question

I am trying to get a css class selector to override an id selector… the reason I wan’t to do this is because I am trying to create a jQuery website design that has boxes on the left, when these boxes are clicked, any open box minimises and the one clicked opens… The boxes are denoted by an id such as for the nth box id="box_n" and when a box is opened it is given the class "selected" so it can be seen by the jQuery as the box that needs to be minimised when another box is selected. However i want the selected boxes to be scrollable, and therefore the "selected" class needs to override the "box_n" id scroll attribute which is set to scroll:hidden. Is there any way of doing this simply? Here is the css that I have…

.selected
{
overflow: scroll;
}

#box_1
{
background-color:#000;
position: absolute;
opacity: 0.6;
top: 0px;
left: -100px;
margin-right:auto;
float: left;
height: 65px;
width: 135px;
border-radius:4px;
-moz-border-radius:4px; /* Firefox 3.6 and earlier */
overflow:hidden;
}

and the jQuery is here:

$("#box_3")
    .animate({
        width: largeWidth,
        left: 60,
        top: 0,
        borderRadius: 10,
        MozborderRadius: 10
    }, (60), "swing")
    .animate({
        height: largeHeight
    }, (60), "swing")
    .animate({
        opacity: 1
    }, (160));

$("#box_3").addClass("selected");
selected = 1;

Thanks for your help!

Answer 1

Use !important on your rules. It will make them override anything else.

.selected
{
    overflow: scroll !important;
}