Empty Pseudo-Classes in CSS

:empty

Empty pseudo-classes in CSS allow you to target and style elements that do not contain any content or child elements. These pseudo-classes are useful for adding styles or hiding elements that are empty, providing visual cues or adjustments to the layout when certain elements have no content.

The :empty pseudo-class selects elements that have no children or contain only whitespace characters.This pseudo-class is commonly used to hide or style elements that have no content, making it helpful for handling cases where elements should be hidden or styled differently when they are empty.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Structural Pseudo-classes</title>
    <style>
      div:empty {
        background-color: #f1f1f1;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:empty</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quasi officiis, earum nostrum magnam voluptas!</p>
    <div></div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eos sit voluptatum odio iste similique.</div>
    <div></div>
  </body>
</html>

Live Preview

The provided CSS code targets and styles <div> elements that are completely empty, applying various styles to such empty <div> elements.

This selector targets <div> elements that are completely empty, meaning they have no child elements or visible content.

In summary, this code is used to style and visually distinguish empty <div> elements by giving them a light gray background, padding, margin at the bottom, and a border. These styles help provide a visual indication of empty <div> elements in the layout and improve the overall design of a web page by managing the appearance of unused or empty container elements.

Empty pseudo-classes provide a way to handle and style elements with no content or child elements in a dynamic and flexible manner. They are especially useful for creating clean and visually appealing designs by managing the appearance of empty or unused elements on a web page.