English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:empty CSS pseudo-class represents elements that do not have any child elements. Child elements can only be element nodes or text (including spaces).
Complete CSS Selector Reference Manual
Specify the background color of an empty div element:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title> <style> .box { background: pink; height: 80px; width: 80px; margin:10px; } .box:empty { background: lime; } </style> </head> <body> <div class="box"><!-- My color is green --></div> <div class="box">My background color is pink</div> <div class="box"> <!-- I will be red because the content around this box is blank --> </div> </body> </html>Test and see ‹/›
:empty
:empty selector selects each element that has no child elements (including text nodes).
The numbers in the table indicate the first browser version number that supports this attribute.
Selector | |||||
---|---|---|---|---|---|
:empty | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |