Treehouse: Grow your CSS skills. Land your dream job.


Last updated on:

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.

div:empty {
   display: none;

Will Match


<div><!-- test --></div>

Will Not Match

<div> </div>

  <!-- test -->


It's useful for hiding empty elements that might cause weird spacing (e.g. they have padding). Or something like removing the border from the top left table cell element in a cross-referencing table.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
any 3.1+ 1.5+ 9.5+ 9+ ? ?


  1. Henry
    Permalink to comment#

    Loving the :empty pseudo selector – is especially good with BuddyPress template notices!

  2. Charles Walton
    Permalink to comment#

    For reference, puesdoelements (:after/:before) don’t count as content. Check it:,css,output

  3. What about that css:

    *:empty {
    • Yeah, it’s gonna work. Might wanna use !important there as well.

      One useful example would be if you have hard-coded elements.
      You can use
      p:empty+hr {
      display: none

      That would hide unneeded separators.
      Tweak to your own preference.

  4. Permalink to comment#

    *:empty rule style even hr tag and <a>img tag</a>

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>