Treehouse: 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+ 2.1+ 3.1+

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. Sergio Pinna

    What about that css:

    *:empty {
        display:none;
        margin:0;
        padding:0;
        border:0;
    }
    
    • Vergil Penkov
      Permalink to comment#

      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
      div:empty+hr,
      p:empty+hr {
      display: none
      }

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

  4. macem
    Permalink to comment#

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

  5. Heath L.
    Permalink to comment#

    This selector didn’t work for me when I tested it on CodePen. Is my code incorrect? Here is the code I used to target “empty” elements. Perhaps this selector is no longer supported?

    When I targeted divs that were NOT empty, however, it worked. See here.

    • Michael Miko
      Permalink to comment#

      It works, you just don’t see it.
      Try

      :empty {
      background-color: #99ff99;
      padding: 16px;
      }

  6. Heath L.
    Permalink to comment#

    You’re right Micheal, I can see the color when I add padding to the CSS. Can you tell I’m a beginner?

    Thx very much for the help

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```