:empty
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.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p:empty {
width: 100px;
height: 50px;
background: yellow;
}
P {
width: 100px;
height: 50px;
background: lime;
}
</style>
</head>
<body>
<h3>The Yellow box is :empty and lime box is non:empty</h3>
<p></p>
<p>A paragraph.</p>
<p>Another paragraph.</p>
</body>
</html>Output:
:blank
The :blank CSS pseudo-class selects empty user input elements (e.g. <input> or <textarea>).
<!DOCTYPE html>
<html>
<head>
<style>
textarea:blank {
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<h3>:blank CSS Pseudo Selector </h3>
<h3>Using TextArea</h3>
<textarea></textarea><br>
<textarea>A paragraph.</textarea><br>
<textarea>Another paragraph.</textarea>
</body>
</html>Output:
The Tech Platform