: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+ | ? | ? |
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