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

  7. Karthick Rajan

    It works good when an element is empty. But if atleast it had a “space” it doesn’t work. I understand it will not work as it is not empty. But my requirement is this.

    I have a parent Div and an Empty Child Div within it. So the Height of the parent Div is ‘0’. Can i in some way use a css selector to select the parent Div. I need to clear out certain css properties like padding, margin on the parent Div if it’s height is ‘0’. I can’t use Javascript or Jquery for some reason. Is this possible.

  8. mister

    If <div>0</div> is equal to zero, how it can be disabled.
    Please advise…

  9. Alex Ward
    Permalink to comment#

    Point to note: I know that a few people have suggested *:empty is a good idea. However beware that this will include inputs with no value too.

    • some_jack

      *:empty:not(input)?

      Tough you’ld still have to care for many other elements that can be empty (display only background image/color etc…)

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>
```