The :empty pseudo class

written by: Jeff McNear

“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.”

The :empty pseudo class allows for an element to behave differently if the contents are empty rather than populated – I recently used this to conditionally generate labels in a sidebar for Facets WP selectors, where in some conditions the selector would be empty and so dropped from view.

.facetwp-type-checkboxes:before {content:"Review Type"; }
/*-- will show the title Review Type before selector --*/
.facetwp-type-checkboxes:empty:before {content:" "; }
/*-- will not show a title if the selector is empty --*/