Question

I’ve got this HTML that I’m trying to style:

<div id="menubar">
    <menu id="menubarTransportControls">Foobar</menu>
</div>

Can anyone explain why this CSS…

#menubar menu {
    width: auto;
}

…takes priority over…

#menubarTransportControls {
    width: 100%;
}

I’m using IE7 with the HTML5 shiv javascript. Thanks

Answer 1

#menubar menu has higher specificity than #menubarTransportControls.

To understand specificity:

• The specs: http://www.w3.org/TR/CSS21/cascade.html#specificity
• If you like Star Wars: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
• Otherwise: http://css-tricks.com/specifics-on-css-specificity/

You can use this calculator if you like:

http://www.suzyit.com/tools/specificity.php

Selector                    Score (a,b,c,d)
#menubar menu               0,1,0,1
#menubarTransportControls   0,1,0,0

Be sure to read some of the above resources to understand what the “Score” means.