Widely available Supported across all major browsers. Safe to use in production.

:empty

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:empty
1
12
1
3.1
18
2
matches whitespace

Matches elements with whitespace
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.container:empty {
  display: none;
}
.message:empty::before {
  content: "No data";
  color: #6b7280;
}

Live demo

emptyelement. hidden

CSS emptyelement. hidden demo.

PreviewFullscreen

empty. time to alternativetext

CSS empty. time to alternativetext demo.

PreviewFullscreen

empty. statedisplay

CSS empty. statedisplay demo.

PreviewFullscreen

Use cases

  • Using :empty

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

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links