Applying a CSS style to an element using multiple selectors fails

Question

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 dialog-icon that's inside a dialog-box and that is inside a dialog-container?

Am I missing something?

That's a single selector that makes use of descendant combinators (the spaces between the IDs). — BoltClock
– BoltClock, Commented Dec 2, 2010 at 11:49
Re edit, is that new HTML code the one you meant to paste at the top? If so maybe you should replace that code block instead so your question is clearer. — BoltClock
– BoltClock, Commented Dec 2, 2010 at 11:52
ok doing it now.. its not new html.. i pasted it wrong.. i will update the question — Martin
– Martin, Commented Dec 2, 2010 at 11:54
Hmmm, that selector should work just fine... could you look in your stylesheet and see if there's anything else that might be overriding that rule? — BoltClock
– BoltClock, Commented Dec 2, 2010 at 11:56

Mutation Person · Accepted Answer · 2010-12-02 12:06:09Z

3

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?

edited Dec 2, 2010 at 12:06

answered Dec 2, 2010 at 11:45

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Over a year ago

Yes i think i had a problem with cache ... Sorry to trouble everyone... It was very strange as i also thought it should be working..

Linus Kleen · Accepted Answer · 2010-12-02 11:45:31Z

0

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.

answered Dec 2, 2010 at 11:45

Linus Kleen

34.8k10 gold badges97 silver badges100 bronze badges

1 Comment

Martin Over a year ago

Very true :-) but i would like to know why its not working for when i need to use it with class names for example

jwueller · Accepted Answer · 2010-12-02 11:46:10Z

0

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.

answered Dec 2, 2010 at 11:46

jwueller

31.1k5 gold badges69 silver badges71 bronze badges

Collectives™ on Stack Overflow

Applying a CSS style to an element using multiple selectors fails

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related