CSS :empty - Style Empty Element

The CSS :empty pseudo-class is used when we need to select an element with no child element. For example, the following CSS code applies style to every empty P elements:

p:empty {background-color: brown; color: white; padding: 8px;}

CSS :empty Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p:empty {background-color: sienna; padding: 10px;}
      div:empty {border: 3px solid #ccc; padding: 40px;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   <div>
      <p>This is para one, inside DIV.</p>
      <p>This is para two, inside DIV.</p>
   </div>
   <p></p>
   <div></div>
   <p>This is para three.</p>
   <p></p>
   <p>This is para five.</p>
   
</body>
</html>

Output

This is para one.

This is para one, inside DIV.

This is para two, inside DIV.

This is para three.

This is para five.

In above example, the P and DIV element with no child, are styled.

Note - The :empty select elements with no children, including the text and WhiteSpace.

CSS Online Test

« Previous Tutorial Next Tutorial »