CSS: How to exclude a DIV and its descendants?

advertisements

I have html that looks like this:

<div id="mainDiv">
    <div id="childDiv1">
        <img />
        <div>
            <img />
            <div />
        </div>
        ...
    </div>
    <div id="childDiv2">
        ...
    </div>
    ...
</div>

I want to select everything in mainDiv except childDiv1 and its descendents. I thought that #mainDiv :not(#childDiv1) might work but it only excludes chidlDiv1 while all of its descendents get selected. #childDiv1 * will select all of the descendents (but not childDiv1 itself) but :not(#childDiv1 *) is invalid. A jQuery solution would be preferable. Thanks


Think this works:

$("#mainDiv > :not(#childDiv1)")