CSS :empty Pseudo Class
The CSS :empty pseudo-class selects the elements that do not have any child element or text content.
The ::before and ::after pseudo-elements do not affect the emptiness of an element, even if they exist inside the element.
If another tag directly follows the open tag, then it is considered empty.
Self-closing elements such as <hr />, <br />, and <img /> are considered empty and will match the :empty selector.
Version¶
Selectors Level 3
Selectors Level 4
In Selectors Level 4, the :empty pseudo-class was changed to act like :-moz-only-whitespace, but currently it is not supported by any browser.
Syntax¶
:empty {
css declarations;
}Example of the :empty selector with the <p> tag:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of thee document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Example of the :empty selector with the <div> tag:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji