Last Updated
Learn Development at Frontend Masters
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.
Note that in Selectors Level 4 spec :empty has been updated to include all-whitespace element. Big change! Yay! Not sure if any browser is actually doing that yet.
Other Resources
- Vanishing Acts (use cases)
- A Case for :empty
- CSS :empty Selector
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.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 87 | 83 | 2.1 | 3.2 |
Loving the :empty pseudo selector – is especially good with BuddyPress template notices!
For reference, puesdoelements (:after/:before) don’t count as content. Check it:
http://jsbin.com/OveLetU/4/edit?html,css,output
Hi, it ignores empty if it has :after element for me :(
What about that css:
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.
*:empty rule style even
hr tagand<a>img tag</a>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.
It works, you just don’t see it.
Try
:empty {
background-color: #99ff99;
padding: 16px;
}
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.
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
Sorry — Michael
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.
If <div>0</div> is equal to zero, how it can be disabled.
Please advise…
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
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.
*:empty:not(input)?
Tough you’ld still have to care for many other elements that can be empty (display only background image/color etc…)
This came in really handy. Thanks!
I made a class called hideif and got this cool little snippet.
.hideif:empty {
display:none !important;
}
Thanks yet again this is so cool!
Seems that the following cell, containing a table that has empty cells, is not triggered by :empty …
you can trigger the last td:empty then go up on the parents
<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.
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
@mediaquery usingpadding:0px;and it works like a charm.Thank you!!!!
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.
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
Thanks! I’ve updated the link
img[src=””] {
display: none !important;
}
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";
position:relative;
font-size:inherit;
}
Works like a charm.
I really don’t get why
:emptyby design is ignoring whitespace?We are in need for a new pseudo class like
:almost-empty..Please enlighten me if i’m missing something
You can use :blank pseudo selector which will work like you supposed :almost-empty.
:blank ignore white spaces…