Override CSS visibility

Question

I have

#boxes { visibility: hidden } 
.active { visibility: visible }

I want the div to be hidden unless .active is in use. I tried <div id="boxes" class="active"> but the div was still hidden.

Is there anyway for the .active class to override the hidden visibility??

Answer 1

CSS selectors have "specificity" or weight (6.4.3 Calculating a selector's specificity ) which defines what selector takes precedence. Selectors which refer to elements by ID have high weight, so to override it you need more specific selector for "active":

#boxes.active { visibility: visible }

Or less specific selector for #boxes in some way. Class selector is more important than element selector, so it will override visibility (jsfiddle ):

div  { visibility: hidden } 
.active { visibility: visible }

Answer 2

If your <div> element is being used as a same-page link with multiple #boxes, such as for tabbed pages, you can also use :target. This would allow you to style each one individually:)

<div id="boxes">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

The CSS would change slightly...adding a space after #boxes, since the class is in a decendent <div>.

#boxes .box1:target{visibility: visible;}
#boxes .box1:not(:target){visibility: hidden;}
#boxes .box2:target{visibility: visible;}
#boxes .box1:not(:target){visibility: hidden;}

Answer 3

#boxes.active { visibility: visible !important; }

Actually '!important' is not necessary when pairing a div with class, but if it doesn't works for you, just consider this..

Answer 4

You can use !important for giving the importance of value. !import simple meaning is, It is important than others so execute only it.

#boxes.active { 
    visibility: visible !important; 
}

Learn more here