Question

I’m not sure if what I’m looking for is called selectors – so let’s hope people will understand my question…

I have (let’s say) something like this:

<div id="mainwrapper" class="default">
 <div class="boxone"></div>
 <div class="boxtwo"></div>
 ...
</div>

CSS:

.default {width: 100%; background-color: #fff;}
.boxone {width: 50%; background: #f00;}
.boxtwo {width: 50%; background: #0f0;}

What I need to do is to add something like this to my CSS (changing mainwrapper’s className to “dark” also changes all it’s child elements):

.dark {background: #000;}
.dark > .boxone {background: #333;}
.dark > .boxone {background: #666;}

My second CSS is (probably) wrong, but I guess it’s done like that… but how?
Thank you.

Answer 1

.dark .boxone {background: #333;}
.dark .boxtwo {background: #666;}

Should work. Demo: http://jsfiddle.net/PURLw/1/