Can you use two IDs to select with in CSS? #content.special #page

Question

I've search through about 10 pages, can't find this question here. I'm trying to ask what should be a simple question, but I'd like to know if there is a way to select the second ID conditionally in CSS.

Here is the gist of it:

#container {width:1000px;}
#page {width:600px;}
#sidebar {width:400px;}

#container.special {width:800px}
#container.special #sidebar {width:200px;}

Basically, if the container has the class special, it shrinks and therefor the divs inside would need to adjust as well.

I thought this would work, but it doesn't seem to. I can fix this many different ways and this is only an example, so I'm not trying to fix anything, just understand if it is possible and if not, if there is a CSS solution.

Thanks, Exit

Answer 1

What you have is valid CSS. Your rule for #container.special #sidebar will override the #sidebar rule (since it's more specific), and the sidebar should get smaller.

If it's not taking effect, try using Firebug to inspect the #sidebar element. It will show you what specific style rules are actually getting applied. Then at least you'll know which rule is conflicting and we can help figure out why.