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).
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.
Webmentions for this page
About webmentionsLikes: 1
Reposts: 0
Mentions: 3