CSS Selectors

Targeting Empty Elements

Browser compatibility
Chrome Firefox (Gecko) Internet Explorer Opera Safari
1 3.5 9 9.5 3.2

Matches elements that have no children, including other elements or text. Comments are ignored, although any amount of whitespace will negate a match.

Syntax

As a structural pseudo-class selector, empty is preceded by a colon (:). To make it element specific, you can place a simple selector prior to the colon with no whitespace.


:empty {
  border: 1px solid red;
    }

td:empty {
  border: 1px solid red;
    }
   
Targeting empty elements

Example:

Targeting empty elements

Below this paragraph is an empty paragraph. It will match :empty or not based on whether it contains whitespace or not.

Targeting empty cells

Ping Pong Tournament win totals (head to head)
Wins Susan Tom Mary
Susan 2 3
Tom 1 2
Mary 0 1