The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the :empty pseudo selector comes with a couple of potentially confusing behaviors when it comes to which elements it considers empty.
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <style type="text/css"> p { background: rgb(255, 211, 233); margin-top: 10px; margin-bottom: 0px; padding: 10px; } // Be carefual that img is also considered as an empty element *:empty { display: none; } </style> </head> <body> <p></p> <p>Some content</p> <p></p> <img width="200px" height="200px" src="https://source.unsplash.com/user/erondu/daily" /> </body> </html>