Hiding Empty Elements with CSS

A very quick tip: the :empty CSS pseudo‑class is simple, easy to understand and (now) incredibly well‑supported. So, to hide an empty element, it is as simple as:

.classname:empty {
  /* Apply these styles only when the element is empty. */
  display: none;
}

:empty matches an element with no element children or non‑empty text nodes. In current browsers, even a single space prevents a match; an empty child element also prevents it. Comments do not count. This checks the document's child nodes, not the current value a user has typed into a form control.

For a more experimental approach, :-moz-only-whitespace will match any element which contains either nothing, or only whitespace. Unsurprisingly, however, support is limited to Firefox for the time being.

Whilst there is currently some discussion about how :only-whitespace, :blank, and :empty might be defined in Selectors Level 4, at the time of writing nothing has yet been formally agreed or implemented by any of the browser vendors. It seems likely that eventually :empty will incorporate elements that contain whitespace too.