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><!-- nothing but a comment--></p>

And it will also select these paragraphs, which p:empty would not:

<p> </p>

  <!--a comment and some whitespace-->

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.


More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Nope Nope As :-moz-only-whitespace Nope Nope Nope Nope


  1. User Avatar
    Permalink to comment#

    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!

  2. User Avatar
    Permalink to comment#

    Would this be a quick fix for empty

    made by WordPress’s wautop?

  3. User Avatar
    Permalink to comment#

    p tags that is

  4. User Avatar
    Permalink to comment#

    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.

  5. User Avatar
    Kuba Przetakiewicz
    Permalink to comment#

    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-child and :last-child.

  6. User Avatar
    Luca Rager
    Permalink to comment#

    For anybody looking for a quick workaround (I used this with angular)
    Drop a div in your container, and target it with :only-child

    <div class="container">
       <div class="isEmpty"></div>
       <-- Your Code with ng-if or similar -->
    .container > div.isEmpty:only-child {
       // Write fancy css code
    • User Avatar
      Ramon Caldeira
      Permalink to comment#

      Thank you!! It solved a huge problem I’ve been struggling with.

    • User Avatar

      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.

    • User Avatar
      Permalink to comment#

      This just selects the isEmpty div, no? How would that help with styling the container?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      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.

  7. User Avatar

    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.

  8. User Avatar
    Permalink to comment#

    This feature would be really useful and cool!

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.