:empty
Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков, текста или псевдоэлементов внутри.
<div>
<h6>Без :empty</h6>
<p>Если человеку...</p>
<footer class="reactions"><span>🤔</span></footer>
</div>
<div>
<h6>С :empty</h6>
<p>Если заменить...</p>
<footer class="reactions with-empty"><span>😁</span></footer>
</div>
.reactions {
border: 1px solid blue;
border-radius: 16px;
padding: 5px;
background-color: #123E66;
}
.with-empty:empty {
display: none;
}
В примере выше реакции на сообщения будут вставлены в блок с классом reactions. Ему заданы внутренние отступы, фоновый цвет и рамка. Если реакций нет, то блок останется пустым и будет скрыт.
Без использования псевдокласса :empty у нас на экране останется пустой элемент с внутренними отступами, фоном и рамкой.
👉 @seniorFront