Pusty element :empty

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:empty { cecha: wartość }

Zdarza się, że w dokumencie HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika zamykającego (BR, HR, IMG, INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści. Dzięki opisywanemu tutaj selektorowi można nadać takim elementom odrębne formatowanie.

Wstawianie pustych znaczników do kodu źródłowego nie ma wielkiego sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści.

Przykład :empty

Po wpisaniu w arkuszu stylów:

p:empty { background-color: red; width: 100%; height: 1em }

a w dowolnym miejscu strony:

<p></p>
<p> </p>
<p><b></b></p>
<p>To jest akapit</p>

otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego:

To jest akapit

Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko pusty element-dziecko), nie otrzymały zmienionego formatowania.

---

Przykład z użyciem elementu, który nie posiada znacznika zamykającego:

img:empty { border: 1px solid red }