CSS trick

Hide elements that contain either nothing or only an HTML comment.



CSS



div:empty {
   display: none;
}


This will hide div if it empty.

Will match

<div></div>

<div><!-- test --></div>

Will not match

<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

You can also create separate CSS class instead of applying to the element


.container {
   width: 100px;
   height: 200px;
    overflow-y: scroll;
    border:1px solid #d3d3d3;

}

.container:empty {
   display:none
}


Will match

<div class="container"></div>

<div class="container"><!-- test --></div>

Will not match

<div class="container"> </div>

<div class="container">
  <!-- test -->
</div>

<div class="container">
</div>


Comments

Popular Posts