title: Hide div, if the div is empty
body: <p>How can I hide a DIV (HEADER) if the DIV is empty?
  here is my HTML and Style, have tried. <code>HEADER:empty</code>, but when I run the code, the DIV is still there.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body { 
      width: 1080px;
      height: 1920px;
  }
  
  /* Start MAIN-grid-container */
  .MAIN-grid-container {
      display: grid;
      grid-template-columns: 1080px;
      grid-template-rows: 100px 640px 300px 100px;
      grid-template-areas: "HEADER" "TOP" "MIDDLE" "FOOTER";
      margin: 0px 0px 0px 0px; /*top,right,bottom,left or auto for horizontal center*/
  }
  
  .MIDDLE { 
      grid-area: MIDDLE; 
      background-color:lightblue;
  }
  
  .FOOTER { 
      grid-area: FOOTER; 
      background-color:yellow;
  }
  
  .TOP { 
      grid-area: TOP; 
      background-color:red;
  }
  
  .HEADER { 
      grid-area: HEADER; 
      background-color:green;
  }
  
  .HEADER:empty { 
      grid-area: HEADER; 
      display: block;
  }
  /* End MAIN-grid-container */
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="MAIN-grid-container"&gt;
    &lt;div class="HEADER"&gt;&lt;/div&gt;
    &lt;div class="TOP"&gt;
      &lt;div class="SUB-TOP-grid-container"&gt;
        &lt;div class="SUB-TOP-MAIN" id="WeatherContainer"&gt;
          &lt;div class="SUB-TOP-MAIN-grid-container"&gt;
            &lt;div class="SUB-TOP-MAIN-TIME"&gt;DATE AND TIME&lt;br/&gt;&lt;br/&gt;hhfh&lt;/div&gt;
            &lt;div class="SUB-TOP-MAIN-CURRENT"&gt;CURRENT WEATHER&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="SUB-TOP-FORECAST"&gt;FORECAST test&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hope someone can guide me, in the right direction.
  As you can see the HEADER DIV is empty - but is still showed with the green background color.</p>
  
  <p>UPDATE
  As some of you write, then I can add this and it works..</p>
  
  <pre><code>.HEADER-empty, .HEADER:empty, [class^=HEADER-]:empty { 
      grid-area: HEADER; 
      display: none;
  }
  </code></pre>
  
  <p>but I then get a white area over the TOP div and thats not what i'm looking for.
  If the HEADER is empty, then hide the div and get the TOP div to the top.</p>
  
  <p>I have then tried to use this for the TOP class-style. </p>
  
  <pre><code>position: fixed;
  </code></pre>
  
  <p>But the I get a white area between the TOP and MIDDLE div, can someone help me ? </p>