CSS application 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;
}

Which 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 allways overrides .menuClose.

How can I change the order? ie. make the width of "X" 10px instead of 100% ?

Answer 1

It's because you have 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 on how css cascade priorities are handled: http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html