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

2010-03-15 Thread Chris Blake 
Hi,

I want to targetdiv#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-toppanelcontent/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/

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

2010-03-15 Thread Bobby Jack 
--- On Mon, 3/15/10, Chris Blake ch...@3pointdesign.com wrote:

 Here is the HTML:
 
 div id=yoo-toppanel-1
 class=yoo-toppanelcontent/div
 
 And it reads this CSS first:
 
 #yoo-toppanel-1 div.yoo-toppanel div.panel-container {

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

Hi Chris,

It's actually 'disregarding' your CSS because '#yoo-toppanel-1 
div.yoo-toppanel' doesn't match; that's looking for a DIV element with a class 
of 'yoo-toppanel' INSIDE an element with an ID of 'yoo-toppanel-1'.

To match that element, you actually want:

#yoo-toppanel-1.yoo-toppanel

OR

div#yoo-toppanel-1.yoo-toppanel

OR just

#yoo-toppanel-1

which will probably 'win' on specificity, depending on the other CSS present.

- Bobby
__
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/