Combining ID and class selector in CSS seems to fail

My different color styles don't get applied when I combine class and ID selectors. My font color remains #999. Using the Firebug plugin for Firefox 3, I don't even see the multiple-selector CSS being picked up. Anybody know why?

Here is the CSS, taken from main.css:

#headercontent {color: #999;}
.home #headercontent { color: #f00; }
.sublevel #headercontent { color: #0f0; }

... and the following HTML snippets, each from two different pages:
HOMEPAGE:
<div id="headercontent" class="home">This is a test</div>
2ND LEVEL PAGE:
<div id="headercontent" class="sublevel">This is a test</div>

TIA,
blakenzoe

 

That won't work.

this code (.sublevel #headercontent { color: #0f0; }) could would only work if your xhtml code is like this:

<div class="sublevel">
 <div id="headercontent"></div>
</div>

Code (markup):

your code should be like this:

.home {color: #f00 !important;}
.sublevel { color: #0f0 !important; }
 

Code (markup):

 

or just remove the spaces. If you are trying to combine the same class on the same ID, you can't have the space between them. The space, as glorie implies, indicates it's a child div, not the same one.

I would code that CSS with the ID first.

#headercontent {color: #999;}
#headercontent.home { color: #F00; }
#headercontent.sublevel { color: #0F0; }

Code (markup):

That should do what you want.

 

Thank you both. The implied parent-child relationship is what I had failed to understand. All makes sense now!

-blakenzoe