The :empty pseudo class
written by: Jeff McNearThe :empty pseudo class
“The
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty:emptyCSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSScontentdo 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 --*/