CSS selektor :empty

Pro zachycení pomocí :empty nesmí být v elementu:

• Jiný HTML element.
• Libovolný text.
• Mezera nebo odřádkování.

Tedy CSS pravidlo:

div:empty {
  display: none;
}

Skryje pouze:

<div></div>

Případně se jako empty bere i HTML komentář:

<div><!-- komentář --></div>

Podpora

CSS selektor :empty je funkční od Internet Exploreru 9.

Využití

Asi nejzajímavější je využití v případě, kdy není jisté, jestli bude ve značce nějaký obsah (třeba se vypisuje JavaScriptem), a takový element má nějaký padding, pozadí nebo rámeček.

Pokud by v něm žádný obsah nebyl, zobrazilo by se něco jako:

Skrytí značky pomocí :empty tento případ elegantně řeší bez nutnosti zobrazovat/skrývat element JavaScriptem změnou vlastnosti display.