Last updated on

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.

div:empty {
   display: none;
}

Will Match

<div></div>

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

Will Not Match

<div> </div>

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

<div>
</div>

It’s useful for hiding empty elements that might cause weird spacing (e.g. they have padding). Or something like removing the border from the top left table cell element in a cross-referencing table.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
any 3.1+ 1.5+ 9.5+ 9+ ? ?

Leave a Reply

Your email address will not be published. Required fields are marked *