: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. User Avatar
    Henry
    Permalink to comment#

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

  2. User Avatar
    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

    • User Avatar
      Martina Ant
      Permalink to comment#

      Hi, it ignores empty if it has :after element for me :(

  3. User Avatar
    Sergio Pinna

    What about that css:

    *:empty {
        display:none;
        margin:0;
        padding:0;
        border:0;
    }
    
    • User Avatar
      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. User Avatar
    macem
    Permalink to comment#

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

  5. User Avatar
    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.

    • User Avatar
      Michael Miko
      Permalink to comment#

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

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    mister

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

    • User Avatar
      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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    Nick van de Veerdonk
    Permalink to comment#

    Thanks yet again this is so cool!

  12. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag