CSS App Order

Question

I have this CSS

.menuPopup div { width: 100%; padding: 5px; } .menuClose { width:10px; height:10px; padding:0px; position:absolute; top:0px; right:0px; cursor:pointer; } 

What should apply to this HTML:

 <div class="menuPopup"> <div >A</div> <div >B</div> <div >C</div> <div class="menuClose">X</div> </div> 

When applied, the .menuPopup div declaration always overrides the .menuClose .

How can I change the order? i.e. do the width "X" 10px instead of 100% ?

Answer 1

This is because there are more selectors in the top declaration.

if you do this, it should overwrite:

 .menuPopup div.menuClose { width:10px; height:10px; padding:0px; position:absolute; top:0px; right:0px; cursor:pointer; } 

See this article for an explanation of how css cascade priorities are handled: http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html

Answer 2

You can try using !important for the rule you want to apply. For instance:

 .menuClose { width:10px !important; height:10px !important; etc... }