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:
xxxxxxxxxx1
div:empty {2
background: yellow;3
}4
5
.class-name:empty {6
background: yellow;7
}
In this example, we present how to use :empty pseudo class to style only empty elements.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.yellow-element:empty {7
height: 1rem;8
background: yellow;9
border: 2px solid orange;10
}11
12
.blue-element:empty {13
height: 1rem;14
background: lightblue;15
border: 2px solid blue;16
}17
18
</style>19
</head>20
<body>21
<div class="yellow-element">This element is not empty, it won't be styled</div>22
<div class="yellow-element"></div>23
<div class="blue-element">This element is not empty, it won't be styled</div>24
<div class="blue-element"></div>25
</body>26
</html>
