:empty

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…

    • Salman
      Permalink to comment#

      0 is just a general text not wrapped inside any text
      in short div:empty only checks if there exits a sub tag inside this div or not

  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…)

  10. Max
    Permalink to comment#

    This came in really handy. Thanks!

    I made a class called hideif and got this cool little snippet.

    .hideif:empty {
    display:none !important;
    }

  11. Nick van de Veerdonk
    Permalink to comment#

    Thanks yet again this is so cool!

  12. Matthijs
    Permalink to comment#

    Seems that the following cell, containing a table that has empty cells, is not triggered by :empty …

    <td><table><tr><td></td></tr></table></td>
    
  13. dugfresh
    Permalink to comment#

    <img /> tags are considered empty, as are, I assume, any self-closing elements. found that to be interesting, though, given a tiny fraction of thought, makes total sense.
    so add this to the list of elements to keep in mind when using :empty.

  14. Roy
    Permalink to comment#

    This makes me very happy.
    I’m using box-sizing and using empty <div> box columns as spacing for my desktop alignments. With @media queries however the spacing boxes leave weird padding-type gaps where I don’t want them.
    I’ve added div:empty to my @media query using padding:0px; and it works like a charm.
    Thank you!!!!

  15. John
    Permalink to comment#

    This is a great tip – I’m fetching data from a sql database using php. When a column is empty, it left an annoying little white circle since the data being fetched was inserted into a white border with a bit of padding. Used with !important, it worked like a charm to get rid of this.

  16. Aaron Grogg
    Permalink to comment#

    FYI, the “Other Resources” link for “Vanishing Acts (use cases)” is a 404 on Dudley’s site.

    Couldn’t find anything that immediately looked like a match…

    Atg

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 triple backtick fences like this:

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

We have a pretty good* newsletter.