The :empty and :blank CSS pseudo selectors
- The Tech Platform
- Dec 24, 2021
- 1 min read
: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
Ragdoll Hit is a fun and chaotic physics-based fighting game where players control floppy characters to deliver hilarious yet powerful attacks against their opponents.