Menu
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>
937
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
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; }
Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state to the DOM. Pseudo-elements act as if you had added a whole new element to the DOM, and enable you to style that.
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.
The differences between pseudo-class and ordinary class are: We can use any string for a class but we cannot use any string for a pseudo-class. Pseudo-classes are predefined. They are: last-child, only-child, invalid, hover, focus, visited, etc. In a selector, we prefix a dot for a class while we prefix a colon for a pseudo-class.
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element. In practice ::before is used as :before and ::after is used as :after because of browser compatibility.
A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
