The pseudo-class :empty defines how an empty element (containing no text) will look like.


The pseudo-class :empty finds any element that has no children.

Elements and text (including spaces) are counted. Comments will not affect the element being treated as non-empty.


/* Selects any div elements that contain no content */

div:empty {
  background: blue;


Applying a custom style to an empty list item:

li:empty {
    border: 1px solid #673ab7;
    color: #ff5722;
    width: 10%;


  • 1
  • 2
  • 3
  • 4