Geek Answers Handbook

The difference between empty and empty pseudo-classes

What is the difference between: empty and: blank (CSS Selectors Level 4 draft)? Also, that empty only works in Firefox at the moment.

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>
+5
source share
2 answers

An empty pseudo-class A class is based on: an empty pseudo-class. like: empty :: blank will select elements that contain nothing at all, or contain only HTML comment. But: blank will also select elements that include spaces, which: empty will not .

css tricks: empty

In addition, From the W3c working draft on level 4 selectors :

An empty pseudo-class is similar: an empty pseudo-class, except that it additionally excludes characters affected by spaces handling [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 line and possibly another whitespace:

 <p> </p>
+10
source

:empty will match all given elements because the node element, which contains nothing but comment nodes, essentially matches the node element without any CSS related children. That is why you do not see the difference between the matches.

The difference is that :blank corresponds to elements that consist solely of whitespace characters that are not otherwise considered :empty . This is because node nodes are just text nodes that contain only white space, and an element with node child text is not an empty element.

It is important to note that CSSWG is considering changing :empty so that it matches elements that contain only spaces, eliminating the need for a separate class alias :blank . This was decided just a few weeks ago . Therefore :blank , as shown in the current WD, may or may not exist in the next WD, which they plan to publish shortly after seeing that the WD was last updated more than two years ago.

If this happens, the answer to this question will be:

:blank was the original suggestion for choosing level 4 to match elements that either have no content or contain only spaces. It has since been removed, and its functionality has been included in level 4 :empty , eliminating the need for a separate class alias with an alias.

+4
source

More articles:


All Articles