The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.

div:empty {
   display: none;

Will Match


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

Will Not Match

<div> </div>

  <!-- test -->


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

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    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:

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

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

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

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

    • User Avatar
      Ivan Djokic
      Permalink to comment#

      By default DIV element has width 100% of his parent and his height is 0px. Thats the reason why you do not see the difference.

  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

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

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


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

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

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

    • User Avatar
      Permalink to comment#

      you can trigger the last td:empty then go up on the parents

  13. User Avatar
    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
    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
    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…


  17. User Avatar
    Satbir Singh
    Permalink to comment#

    img[src=””] {
    display: none !important;

  18. User Avatar
    Larry Tradesouthwest
    Permalink to comment#

    Just as cool is to add text when a div is :empty. Had a project with price tag empty and client wanted it to say Call For Price. Was gonna use javaschnipp but found Chris’s post and did this:

    #your_price.car_final_price_style:empty:before {
    content:"Call For Price";

    Works like a charm.

Leave 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.