Hide and Debug Empty Elements with CSS
Day 29 of National Blog Posting Month #NaBloPoMo
A tiny tip today, but a good one: use the
:empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).
This will hide paragraph elements that have no children, or contain no text nodes. Text nodes include whitespace, so a paragraph containing a whitespace character won’t be hidden in this case. On the other hand, if a content editor has pressed Enter a bunch of times, this’ll do a great job of hiding those extra generated paragraphs.
:empty is also pretty handy for debugging. We can add a red outline to any empty element and see what might be causing us layout issues:
outline: 1px solid red:
Grid layout are one place this can be useful. Sometimes it’s hard to understand why an element is placed on a particular grid column or row. It’s worth remembering that it could be down to empty elements!
Be aware, elements that only have content determined by the CSS
content property will still be considered empty. It’s not good practice to use CSS for most content anyway — always put important content in your HTML.
Webmentions for this pageAbout webmentions