Hide empty elements

CSS, Visual · Nov 18, 2022

Hides elements with no content.

  • Use the :empty pseudo-class to select elements with no content.
Preview

Lorem ipsum dolor sit amet. 

<p>Lorem ipsum dolor sit amet. <button></button></p>
:empty {
  display: none;
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Overflow scroll gradient

    Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

    CSS, Visual · Oct 13, 2021

  • Hide scroll bars

    Hides scrollbars on an element, while still allowing it to be scrollable.

    CSS, Visual · May 13, 2022

  • Show additional content on hover

    Creates a card that displays additional content on hover.

    CSS, Visual · Oct 11, 2021