EN
CSS - style only empty elements
3
points
In this article, we would like to show you how to style only empty elements using CSS.
Quick solution:
div:empty {
background: yellow;
}
.class-name:empty {
background: yellow;
}
Practical example
In this example, we present how to use :empty pseudo class to style only empty elements.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.yellow-element:empty {
height: 1rem;
background: yellow;
border: 2px solid orange;
}
.blue-element:empty {
height: 1rem;
background: lightblue;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="yellow-element">This element is not empty, it won't be styled</div>
<div class="yellow-element"></div>
<div class="blue-element">This element is not empty, it won't be styled</div>
<div class="blue-element"></div>
</body>
</html>