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 {  // styles in here will only be applied  // if the element is empty  display: none;}

:empty can be used on more‑or‑less any CSS selector or element type (although originally intended for form elements such as textarea which has not yet been written in), and will only apply if the targeted element is absolutely and entirely empty. This definition is extremely strict: it will not match an element that contains whitespace (e.g.: a single space). It also will not match an element which has children, even if they themselves are empty.

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.