[css-d] multiple IDs and classes to one div - which one speaks loudest?

[Chris Blake]

Hi,

I want to target    div#yoo-toppanel-1   in my CSS without disturbing  
the styling already in place for     div.yoo-toppanel.
Here is the HTML:

<div id="yoo-toppanel-1" class="yoo-toppanel">content</div>

And it reads this CSS first:

#yoo-toppanel-1 div.yoo-toppanel div.panel-container {
        position: fixed;
        left: 50%;
        width: 100%;
        height: 0px; /* overlapping link bug */
        margin-left: -50%;
        z-index: 15;
}

(mine) and then this:

div.yoo-toppanel div.panel-container {
        position: absolute;
        left: 50%;
        width: 100%;
        height: 0px;
        margin-left: -50%;
        z-index: 15;
}

(default)

But because of this it is disregarding 'mine' and choosing default.

So I messed with the parenting of it a bit and used:

#yoo-toppanel-1  div.panel-container {
        position: fixed;
        left: 50%;
        width: 100%;
        height: 0px; /* overlapping link bug */
        margin-left: -50%;
        z-index: 15;
}

but then it reads both and causes a big mess.

What I am trying to do is not touch the default styling and use only  
'mine' which is read first. I think the problem maybe to do with #yoo- 
toppanel-1 being a sibling of the class.

Any pointers?

Thanks, CB
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/