Selektory pseudoklas

Pusty element

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

selektor:empty { cecha: wartość }

Zdarza się, że w dokumencie (X)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:

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 }

• Domyślne
• Korzeń

• Do góry
• Strona główna
• Drukuj rozdział
• Komentarze