: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
- Vanishing Acts (use cases)
- A Case for :empty
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| any | 3.1+ | 1.5+ | 9.5+ | 9+ | 2.1+ | 3.1+ |
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
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;
}
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 …
<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.