The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not.
p:blank {
display: none;
}p:blank will select these paragraphs, just like p:empty would:
<p></p>
<p><!-- nothing but a comment--></p>And it will also select these paragraphs, which p:empty would not:
<p> </p>
<p>
<!--a comment and some whitespace-->
</p>At the time of this writing, :blank is part of the CSS Selectors Level 4 draft, and is not supported by any browser. Mozilla supports its own version of :blank under a different, vendor-prefixed name: :-moz-only-whitespace. The demo below includes Mozilla’s version, and will only work in Mozilla browsers for now.
See the Pen :blank and :-moz-only-whitespace by mariemosley (@mariemosley) on CodePen.
Related
More Information
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nope | Nope | As :-moz-only-whitespace | Nope | Nope | Nope | Nope |
Hopefully this doesn’t get dropped from the draft. I’ve had a few cases where this would have been useful, and am glad it’s being addressed in some form!
Would this be a quick fix for empty
made by WordPress’s wautop?
p tags that is
I really hope this makes it into the final CSS Selectors Level 4 spec as this would be really useful to have, rather than having to use JS.
This would be exceptionally useful in case of AngularJS comments for
ng-if/ng-repeat, where the comments are absolutely mandatory – you cannot remove them and they have default indentation and line-breaks.Generally AngularJS comments are a pain in the ass for several reasons: visual clutter in the DOM and being treated like a DOM node by a lot of CSS selectors, namely
:first-childand:last-child.For anybody looking for a quick workaround (I used this with angular)
Drop a div in your container, and target it with :only-child
Thank you!! It solved a huge problem I’ve been struggling with.
This doesn’t really help if you want to add “display: none” to an empty section. We need something like :blank for that use case.
This just selects the isEmpty div, no? How would that help with styling the container?
The demo in the post is a pretty good example of how helpful it can be in selecting specific blank content instances of what are otherwise the same HTML elements. It’s a distinguisher and, depending on your use case, that could be super helpful.
Just came in here to say I found a need for this today. Basically I have slides on the left side and notes on the right side, divided by a flex container. If the notes div is empty it should actually not show (display: none;). But since it does contain some whitespace, something like :empty does not work.
We will solve it now by writing more backend code, but if something like can be solved by CSS that would make things a lot easier.
This feature would be really useful and cool!
In CSS Selectors Level 4,
:emptywas redefined so it also matches whitespace and:blankonly selects empty textareas and inputs.Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:blank