title: Hide everything inside a div except a single element?
body: <p>Let's say I got the following structure:</p>
  
  <pre><code>&lt;div id="le-main-id" class="le-main-class"&gt;
    &lt;div id="le-main-id1" class="le-main-class1"&gt;&lt;/div&gt;
    &lt;div id="le-main-id2" class="le-main-class2"&gt;&lt;/div&gt;
    &lt;div id="le-main-id3" class="le-main-class3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <code>display:none</code> because in my real code I got like 40 divs to hide, so it might take too long and ending up in a mess.</p>
  
  <p>so how can I hide everything except the second div?</p>
  
  <p>Something like this</p>
  
  <pre class="lang-css prettyprint-override"><code>#le-main-id.le-main-class2 { /* visible:yes; all the others: no; */}
  #le-main-id { /* visible:no; */}
  </code></pre>
  
  <p>UPDATE:
  I followed the answers, but it's not working. This is how I'm trying:</p>
  
  <pre><code>#lehometemplates &gt; :not (.wpbdp-field-title) {
  display: none !important;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p>Suppose that's what I have:</p>
  
  <pre><code>&lt;div id="le-main-id" class="le-main-class"&gt;
   &lt;div id="1" class="1"&gt;
    &lt;div id="2" class="2"&gt; 
     &lt;div id="3" class="3"&gt; 
      &lt;div id="4" class="4"&gt;
  
            &lt;div id="le-main-id1" class="le-main-class1"&gt;
              &lt;div id="le-main-id1" class="le-main-class1"&gt;&lt;/div&gt;
              &lt;div id="le-main-id2" class="le-main-class2"&gt;&lt;/div&gt;
              &lt;div id="le-main-id3" class="le-main-class3"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So to hide everything and keep the div <code>class="le-main-class2"</code> I'm going to use something like...</p>
  
  <pre><code>#le-main-id &gt; :not (.le-main-class2)  {
      display: none !important;
      }
  </code></pre>
  
  <p>Is it right?</p>
  
  <p>Look, I just don't want to have to select every parent div first, if that's possible.</p>
  
  <p><strong>LAST UPDATE</strong></p>
  
  <p>Finally made it, If I have the following code:</p>
  
  <pre><code>&lt;div id="le-main-id" class="le-main-class"&gt;
   &lt;div id="1" class="1"&gt;
    &lt;div id="2" class="2"&gt; 
     &lt;div id="3" class="3"&gt; 
      &lt;div id="4" class="4"&gt;
  
            &lt;div id="le-main-id111" class="le-main-class111"&gt;
              &lt;div id="le-main-id1" class="le-main-class1"&gt;&lt;/div&gt;
              &lt;div id="le-main-id2" class="le-main-class2"&gt;&lt;/div&gt;
              &lt;div id="le-main-id3" class="le-main-class3"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then all I should do is:</p>
  
  <pre><code>.le-main-class .le-main-class111 &gt; :not(.le-main-class2) {
    display: none;
  }
  </code></pre>
  
  <p>This way I'll hide every child of <code>.le-main-class</code> and <code>.le-main-class111</code>, except <code>.le-main-class2</code>.</p>