css - difference between blank and empty pseudo-classes

Question

what is the difference between :empty and :blank (CSS Selectors Level 4 draft) ? Other than the fact that blank only works in Firefox as of now.

div div{
  
  width:100px;
  height:100px;
  display:inline-block;
  margin:5px;
  }
div.emptyCell:empty{
  
  background:#009688;
  
  }
div.blankCell:blank{
  
  background:#3F51B5;
  
  }

<div><div class="emptyCell"><!-- nothing but a comment--></div>
<div class="emptyCell"></div>
<div class="emptyCell"><!-- nothing but a comment--></div>
<div class="emptyCell"></div>
  </div>
<div>
<div class="blankCell"></div>
<div class="blankCell"><!-- nothing but a comment--></div>
<div class="blankCell"></div>
<div class="blankCell"><!-- nothing but a comment--></div>
  </div>

Answer 1

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.

css-tricks :blank

Also, From the W3c Working Draft on selectors level 4:

The :blank pseudo-class is identical to the :empty pseudo-class, except that it additionally excludes characters affected by whitespace processing [CSS3TEXT] when determining whether an element is empty.

Example:

For example, the following element matches :blank, but not :empty, because it contains at least one linebreak, and possibly other whitespace:

<p> 
</p>