CSS class selectors not having same behavior as id selectors

Question

I have constructed a mock-up of a hierarchical menu system, where the main menu (#moduleMenu1) has a sub-menu (#moduleMenu2), and they both share a CSS class. When I use ID selectors on the menus, all is well ( http://jsfiddle.net/stamminator/pwnuymd2/1 ). However, when I switch to using a class selector, which would be much more elegant (especially if I add a third hierarchy to the menus), the selectors are being overwritten ( http://jsfiddle.net/stamminator/pwnuymd2/ ).

I suppose I can use !important on every property in my styles, but assuming I'll need to have a page which overwrites those styles on an as-needed basis at some point, this isn't a great solution either. Is there a third option besides id selectors or !important that is available?

I'm not sure if this is related, but I've noticed a second problem as well. When I have the HTML files open locally and do a selector in Chrome's JavaScript console on their shared class, I would expect to get back both elements. Instead, I only get back one.

//what I typed into the console:
$(".moduleMenu");

//my result:
<div id="moduleMenu1" class="moduleMenu">
    <div>
        <a href="">Proposal</a>
        <a href="">Browse</a>
        <a href="">Financial</a>
        <a href="">Documents</a>
    </div>
</div>

//where's #moduleMenu2? They both have the same CSS class

Here is a link so you can download the files and run it in your own debugger if you'd like: https://onedrive.live.com/redir?resid=9F7FCE5CCA52BABF!33812&authkey=!ANi0Ivf0BbmVbGk&ithint=file%2czip .

The JavaScript console issue is a non-issue I suppose, but I figured I'd mention it in case it's related. Any help I can get in getting my CSS working properly would be much appreciated!

Answer 1

ID selectors are of higher importance than class selectors. You should almost never use IDs in CSS. Change your ID selectors to class selectors (even if they're unique) and be happy.

<div id="moduleMenu1" class="moduleMenu moduleMenu1">

Demo

Of course, some of your listed selectors can now be combined.

Demo 2

Answer 2

As mentioned by isherwood, ID selectors take priority over class selectors. This is due to CSS specificity, which is the way CSS determines which rules are applied to an element.

The simplest way to explain CSS specificity is: !important > inline > ID > class > element > universal & inherited

For a slightly more in-depth explanation, CSS specificity is stored as four separate integers. When no styles are applied to an element (or only universal and inherited rules are applied), the values for that element are 0,0,0,0.

• The first value represents inline styles
• The second value represents ID style rules
• The third value represents class or attribute style rules
• The fourth value represents tag style rules

1,0,0,0 overrides 0,1,0,0: an inline style will always override an ID style rule. Likewise, an ID will always override a class. However, 0,1,1,0 overrides 0,1,0,0, so a class and an ID in a rule will override the ID rule.

With the exception of some older browsers that roll over values after 255, there is no number of classes that can override an ID: the only way to override an ID style rule is with an ID, inline styles, or the !important flag.