Hide everything inside a div except one 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 div 2 (id = "le-main-id2" class = "le-main-class2"), but I can’t just go to each element and use display:none , because in my real In the code I got as 40 divs to hide, so it can take too much time and end up in a mess.

so how can i hide everything except the second div?

Something like that

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

UPDATE: I followed the answers, but it does not work. This is how I try:

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

UPDATE 2: I believe that I have not formulated the question 100%, although the current answers are really helpful. Let me clarify:

Suppose 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 correct?

Look, I just don't want to select each parent div first, if possible.

LAST UPDATE

Finally did 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 have to do is:

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

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

Answer 1

You can use :not() pseudo-class:

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

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

---

For legacy web browsers, you can hide all child <div> elements 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 previous one.

Since nested elements may have different content, one correct way to hide everything inside #le-main-id excluding .le-main-class2 is to add visibility: hidden to the main container and set it again to visible on .le-main-class2 .

However, visibility leaves the occupied space. But we can fix this by adding line-height: 0 to the main container and resetting the value 1.2 to .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 designed specifically 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>