Hide everything inside a div except a single element?

Question

Let's say I got the following structure:

<div id="le-main-id" class="le-main-class">
  <div id="le-main-id1" class="le-main-class1"></div>
  <div id="le-main-id2" class="le-main-class2"></div>
  <div id="le-main-id3" class="le-main-class3"></div>
</div>

And I need to hide everything, except the div number 2 ( id="le-main-id2" class="le-main-class2"), but I can't just go on each element and use display:none because in my real code I got like 40 divs to hide, so it might take too long and ending up in a mess.

so how can I hide everything except the second div?

Something like this

#le-main-id.le-main-class2 { /* visible:yes; all the others: no; */}
#le-main-id { /* visible:no; */}

UPDATE: I followed the answers, but it's not working. This is how I'm trying:

#lehometemplates > :not (.wpbdp-field-title) {
display: none !important;
}

UPDATE 2: I believe I didn't formulate the question 100%, even though the current answers are indeed helpful. Let me make it more clear:

Suppose that's what I have:

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id1" class="le-main-class1">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

So to hide everything and keep the div class="le-main-class2" I'm going to use something like...

#le-main-id > :not (.le-main-class2)  {
    display: none !important;
    }

Is it right?

Look, I just don't want to have to select every parent div first, if that's possible.

LAST UPDATE

Finally made it, If I have the following code:

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id111" class="le-main-class111">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

Then all I should do is:

.le-main-class .le-main-class111 > :not(.le-main-class2) {
  display: none;
}

This way I'll hide every child of .le-main-class and .le-main-class111, except .le-main-class2.

Answer 1

You could use :not() pseudo-class:

#le-main-id > :not(.le-main-class2) { display: none; }

It's worth noting that :not() is supported in IE9+.

---

For legacy web browsers, you could hide all the children <div>s and then override the declaration for a specific one.

#le-main-id > div { display: none; }
#le-main-id > .le-main-class2 { display: block; }

---

Update

According to the new update, the actual markup is more complicated than the one was posted before.

As nested elements may have other contents, One proper way to hide everything inside #le-main-id excluding .le-main-class2 is to add visibility: hidden to the main container and re-set it back to visible on the .le-main-class2.

However, visibility leaves the occupied space. But we can fix that by adding line-height: 0 to the main container and re-setting the value to 1.2 on the .le-main-class2.

Online Example.

* { margin: 0; /* just for demo */ }

#le-main-id {
  visibility: hidden;
  line-height: 0;
  
  background-color: gold;
}

#le-main-id img {
  display: none; /* to hide the images */
}

#le-main-id .le-main-class2 {
  visibility: visible;
  line-height: 1.2;
  
  background-color: orange;
}

<div id="le-main-id" class="le-main-class">
  .le-main-class
 <div id="1" class="1"> id="1" class="1"
  <div id="2" class="2"> id="2" class="2"
   <div id="3" class="3"> id="3" class="3"
    <div id="4" class="4"> id="4" class="4"
      <img src="http://placehold.it/100" alt="">

          <div id="le-main-id1" class="le-main-class1">
            .le-main-class1
            <div id="le-main-id1" class="le-main-class1">.le-main-class1</div>
            <div id="le-main-id2" class="le-main-class2">.le-main-class2</div>
            <div id="le-main-id3" class="le-main-class3">.le-main-class3</div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

<p>
  The rest of the document....
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis soluta in vel libero dicta similique dolore modi quidem deserunt numquam neque, quo excepturi atque autem, aspernatur consequuntur mollitia, officia aut.
</p>

Answer 2

The CSS3 :not selector is exactly for this case:

.p > div:not(#c2) {
  display: none;
}

<div class="p">
  <div id="c1">1</div>
  <div id="c2">2</div>
  <div id="c3">3</div>
</div>