CSS class not having an effect on a div

Question

Hi Peeps,

The following is an section of my css file plus some HTML. Can anyone tell me when I put class="containerHeader selected" (as is on Test Header A) the background colour is not being set to Red???

Cheers,

ET Fairfax.

div#builderContainer
{
    margin-top: 15px;
    width: 390px;
    height: 700px;
    border: solid 0px #CCCCCC;        
    background-repeat: no-repeat;    
}

div#builderContainer .container
{
    display: none;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* Corner radius */
    border: solid 1px #999999;

}

div#builderContainer .container div:hover 
{
    background-color: #EEEEEE;
}

div#builderContainer .containerHeader
{
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
    background: #93c3cd url(images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat; 

    border-bottom: solid 0px #999999;    

    margin: 0px;      
    margin-top: 25px;      
    padding: 10px;    

    /* display: none;  */

    border: solid 1px #999999;    
    font-weight: bold;
    font-family: Verdana;
    background-color: #FFF;        
    cursor: pointer;    
    vertical-align: middle;
}

div#builderContainer .containerHeader:hover
{
    background: #ccd232 url(images/ui-bg_diagonals-small_75_ccd232_40x40.png) 50% 50% repeat;
}

div#builderContainer .containerHeader:active
{
    background: #db4865 url(images/ui-bg_diagonals-small_40_db4865_40x40.png) 50% 50% repeat; 
}

div#builderContainer .containerHeader .selected
{
    background-color: Red;        
}

<div id="builderContainer">

<div class="containerHeader selected" id="CHA">Test Header A</div>              
<div class="container" id="CA"></div>

<div class="containerHeader" id="CHB">Test Header B</div>                       
<div class="container" id="CB"></div>

</div>

Answer 1

div#builderContainer .containerHeader .selected probably specifies the .selected as a child of containerHeader. Have you tried defining it as #builderContainer .selected instead?

Answer 2

You need to comma separate your CSS rules.

I think you're expecting div#builderContainer .containerHeader .selected to apply to div#builderContainer, .containerHeader, and .selected, but what it's really applying to is a .selected inside a .containerHeader inside a div#builderContainer. Instead, comma separated them:

div#builderContainer, .containerHeader, .selected {
     background-color: Red;
}

Or, if you meant for it to apply to only an element with both classes containerHeader and selected, inside the 'builderContainer', remove the space between those two.

Answer 3

Use selector div#builderContainer .containerHeader.selected without the space.