{"id":195116,"date":"2015-02-04T14:37:38","date_gmt":"2015-02-04T21:37:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=195116"},"modified":"2015-03-26T15:28:22","modified_gmt":"2015-03-26T22:28:22","slug":"blank","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/blank\/","title":{"rendered":":blank"},"content":{"rendered":"

The :blank<\/code> pseudo-class builds upon the :empty<\/a><\/code> pseudo-class. Like :empty<\/code>, :blank<\/code> will select elements that contain nothing at all, or contain only an HTML comment. But, :blank<\/code> will also select elements that include whitespace, which :empty<\/code> will not.<\/p>\n

p:blank {\r\n  display: none;\r\n}<\/code><\/pre>\n
p:blank<\/code> will select these paragraphs, just like p:empty<\/code> would:<\/p>\n
<p><\/p>\r\n<p><!-- nothing but a comment--><\/p><\/code><\/pre>\n
And it will also select these paragraphs, which p:empty<\/code> would not:<\/p>\n
<p> <\/p>\r\n<p>\r\n\r\n  <!--a comment and some whitespace-->\r\n  \r\n<\/p><\/code><\/pre>\n
At the time of this writing, :blank<\/code> is part of the CSS Selectors Level 4 draft, and is not supported by any browser. Mozilla supports its own version of :blank<\/code> under a different, vendor-prefixed name: :-moz-only-whitespace<\/a><\/code>. The demo below includes Mozilla’s version, and will only work in Mozilla browsers for now.<\/p>\n
See the Pen :blank and :-moz-only-whitespace<\/a> by mariemosley (@mariemosley<\/a>) on CodePen<\/a>.<\/p>\n
Related<\/h3>\n