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>
      p:empty {background-color: sienna; padding: 10px;}
      div:empty {border: 3px solid #ccc; padding: 40px;}

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

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 »

Liked this post? Share it!