Pusty element :empty
W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?
CSS 3
selektor:empty { cecha: wartość }Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
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:📋 Zaznacz kod ▶ Edytuj na żywo
p:empty { background-color: red; width: 100%; height: 1em }a w dowolnym miejscu strony:
📋 Zaznacz kod ▶ Edytuj na żywo
<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:
📋 Zaznacz kod ▶ Edytuj na żywo
img:empty { border: 1px solid red }
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
:empty | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 |
Komentarze
Sławomir Kokłowski18.05.2020 21:19
Zależy o co pytasz. Ale generalnie na tak postawione pytanie odpowiedź brzmi: tak ;-)
Zobacz więcej
Gosc18.05.2020 20:29
Ktoś to jeszcze "ulepsza"?
Zobacz więcej
Nitr0Skay07.01.2015 21:17
kurshtml
Teraz już jest w porządku. Dziękuję za poprawkę :)
Zobacz więcej- Sławomir Kokłowski
07.01.2015 00:41
Dziękuję za informację. Minifikator kodu usunął białe znaki z tego znacznika.
Zobacz więcej - Nitr0Skay
06.01.2015 22:24
Gość
Potwierdzam. U mnie też to występuje. Korzystam z Chrome
http://caniuse.com/#search=%3Aempty
http://i.imgur.com/T3Mv6F2.png
Zobacz więcej - Gość
06.01.2015 22:05
Chciałam zapytać: czy tu (http://www.kurshtml.edu.pl/css/pusty_element,pseudoklasy.html) nie ma błędu? U mnie zarówno pierwszy jak i trzeci akapit mają czerwone tło.
Zobacz więcej 
Roberto31.03.2013 19:27
ujemne marginesy, position:absolute, ogólnie wyjęcie z obiegu albo 'przeciwdziałanie' zmianom.
nazwy muszą być dzieckiem elementu, którego :hover powoduje zmianę - [...] jak najedziesz na 'magia' to strong nadal jest...
Zobacz więcej- GoŚćX
31.03.2013 19:21
Chciałbym wiedzieć czy istnieje taka cecha że pojawiający się element który wcześniej miał ceche i wartość: display:none; nie rozwali żadnych elementów strony, tylko pokaże się nad nimi. I gdy robię menu gdzie po najechaniu na klawisz np: galeria zwiększa on wysokoś i na nim wyskakują nazwy...
Zobacz więcej - Roberto
30.03.2013 21:03
zmiana display dziecka z none na jakiś przy :hover rodzica...
Zobacz więcej - jaaa
30.03.2013 20:12
Jak zrobić żeby po najechaniu myszką na jakiś elemnt (np: klawisz z menu) oprucz zmiany (podświetlenia klawisza) pod nim pokazywał się na przykład jakiś bloczek (zupełnie inny elemnt) jakie selektory użyć???
Zobacz więcej
