:blank

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

Comments

  1. User Avatar
    Fewfre
    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
    Will
    Permalink to comment#

    Would this be a quick fix for empty

    made by WordPress’s wautop?

  3. User Avatar
    Will
    Permalink to comment#

    p tags that is

  4. User Avatar
    Grant
    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 -->
    </div>
    
    .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.

Submit 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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag