Applying a CSS style to an element using multiple selectors fails

I'm trying to find out what I am doing wrong. I have the following HTML:

<div id="dialog-container">
    <div id="dialog-box" title="" >
        <div id="dialog-icon" >
            &nbsp;
        </div>
        <p>
        <span id="dialog-message"></span>
        </p>
    </div>
</div>

I have some CSS which floats to the left. If I enter the following it works

#dialog-box #dialog-icon
{
    float: left; 
    height: 32px; 
    width: 32px;   
}

but if I enter 1 more rule i.e insert #dialog-container before the #dialog-box then it's not applied like this:

#dialog-container #dialog-box #dialog-icon
{
    float: left; 
    height: 32px; 
    width: 32px;   
}

but I thought this means apply to 开发者_StackOverflow中文版dialog-icon that's inside a dialog-box and that is inside a dialog-container?

Am I missing something?

You HTML is not correctly formed or structured for your needs. You are missing a closing DIV tag on the second DIV. This is maybe what you need:

<div id="dialog-container">
    <div id="dialog-box" title="" >
        <div id="dialog-icon" >
            &nbsp;
        </div>
    </div>
</div>

The way you had it, the third div was not treated as a child (or 'inside') the second.

EDIT Following Update

I've tested this in JSFiddle (adding a colour for red and some text to highlight). It seems to be working ok:

http://jsfiddle.net/WW3v2/

Do you have any more info?

Firstly, you have three opening <div> tags but only two closing ones.

Secondly, you don't need to declare #id1 #id2 as #id2 is an identifier and is only allowed to identify one element. It is sufficient to declare a rule for #id2.

This

#dialog-container #dialog-box #dialog-icon

would match the following structure:

<div id="dialog-container">
    <div id="dialog-box">
        <div id="dialog-icon"></div>
    </div>
</div>

but since your dialog-icon is not inside of dialog-box (at least not properly), this does not work.