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

Tags: css,jquery-selectors

Problem :

I have html that looks like this:

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

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

Solution :

Think this works:

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

    CSS Howto..

    How to put text over CSS image carousel?

    html css - how to create multiple column list?

    How to make two tooltip ids independently close, and remember cookie?

    How can I write more efficient CSS for the max-width

    How to local storage expand/collapse CSS settings

    How to make the element located in the center of a div?

    How can I force menu items to fit to column width?

    How to make cut off in CSS as shown in the attached image?

    How to extend background CSS styling indefinitely along the x-axis?

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    Parsing erb within erb in a view. How to add CSS class?

    How to find address of css and js files?

    How to change Label color in flex Using CSS?

    How can I make my numbered scale responsive to scrolling and clicking?

    How to make my CSS transition smoother/work on different browsers?

    How can I cut long text according to available div area size?

    How can I apply a font type to everything using css

    How to change color icon in Materialize?

    How to set columns 100% height within body using css

    How to center text over an image in a table using javascript, css, and/or html?

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How to apply multiple CSS selectors to a paticular div?

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How to apply master page and css to child page

    How to use css animate correctly?

    How use a -ms-expand in GWT (Google Web Tolkit)

    how to have custom css overrule bootstrap

    How to align nav bar to bottom of window with no gap between buttons and window edge

    How to scroll through a div before the page scrolls?

    How do I do image color blend in css?