CodePen Embed - Empty Examples

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty -->

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
</div>

body {
  display: flex;
  justify-content: space-around;
}
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

This Pen is owned by Alex on CodePen.

See more by @alextod on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.