:empty

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.

Syntax

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

div:empty {
  background: blue;
}

Example

Applying a custom style to an empty list item:

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

Result:

  • 1
  • 2
  • 3
  • 4