CSS :empty — елемент без вмісту
CSS-селектор :empty обирає елементи, всередині яких немає нічого — ні тексту, ні вкладених елементів, ні навіть пробілу.
Загальний опис
автор: NagarD
Синтаксис
:empty {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Перший абзац геть порожній — саме його і знаходить :empty (червона смуга; висоту додано, бо порожній елемент інакше невидимий). Навіть один пробіл усередині вже робить елемент непорожнім.
HTML
<p></p>
<p>Абзац із текстом — без тла.</p>CSS
p:empty {
background: #ff0000;
height: 20px;
}Три блоки: справді порожній зникає, а той, у якому лише перенос рядка, лишається — це і є головна пастка :empty.
HTML
<div class="alert">Повідомлення є</div>
<div class="alert"></div>
<div class="alert">
</div>
<p class="hint">Другий блок зник. Третій лишився: у ньому перенос рядка.</p>CSS
body {
font: 15px/1.5 system-ui, sans-serif;
}
.alert {
margin-bottom: .5rem;
padding: .6rem .8rem;
border: 1px solid #f59e0b;
border-radius: 6px;
background: #fffbeb;
}
.alert:empty {
display: none;
}
.hint {
color: #475569;
}Коментарі
Коментарів ще немає — будьте першим!