CSS selektor :empty
CSS selektor :empty zaměří element, ve kterém vůbec nic není.
2
minuty
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.
Element s odsazením a rámečkem
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.
Související články
CSS @starting-style
Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.
12
minut
