Обложка канала

Senior Frontend - javascript, html, css

20191 @seniorFront

Senior Front - канал для front-end программистов, здесь есть много всего про CSS3, Javascript, Html5, Angular, React, видео / статьи / курсы

Senior Frontend - javascript, html, css

4 года назад
Открыть в
: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