CSS: How to I exclude a DIV and its descendents?

I have html that looks like this:

<div id="mainDiv">
    <div id="chil开发者_JAVA技巧dDiv1">
        <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)")

Try this:

$("#mainDiv :not(#childDiv1), #childDiv :not(*)")

if any mainDiv children is in div format.

$('#mainDiv div:gt(0)')