Avatar of Sara Cope
Sara Cope on (Updated on )

Grow sales with Customer Journey Smarts Mailchimp tracking pixel

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

div:empty {
   display: none;

Will match

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

Will not match

<div> </div>

  <!-- test -->


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.

Note that in Selectors Level 4 spec :empty has been updated to include all-whitespace element. Big change! Yay! Not sure if any browser is actually doing that yet.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari