Question

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 color is not being set to Red?

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

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