Grow your CSS skills. Land your dream job.

:empty

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></div>

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

Will Not Match

<div> </div>

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

<div>
</div>

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+ ? ?

Comments

  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:

    http://jsbin.com/OveLetU/4/edit?html,css,output

  3. What about that css:

    *:empty {
        display:none;
        margin:0;
        padding:0;
        border:0;
    }
    

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".