:blank

Avatar of Marie Mosley
Marie Mosley on (Updated on )

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