A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).
p:empty { display: none;}
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:
:empty { 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!
See the Pen
Grid with empty cells by Michelle Barker (@michellebarker)
on CodePen.
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.
