: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>
          <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 {
  border: 1px solid blue;
  border-radius: 16px;
  padding: 5px;
  background-color: #123E66;
}

.with-empty:empty {
  display: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере выше реакции на сообщения будут вставлены в блок с классом reactions. Ему заданы внутренние отступы, фоновый цвет и рамка. Если реакций нет, то блок останется пустым и будет скрыт.

Без использования псевдокласса :empty на экране останется пустой элемент с внутренними отступами, фоном и рамкой.

Не будет пустым следующее содержимое:

• другие теги;
• текст, включая пробельные элементы (пробел, невидимый пробел, табуляция, переносы строк).

Будет пустым следующее содержимое:

• HTML-комментарии;
• текст, указанный с помощью CSS-атрибута content;
• псевдоэлементы.

Например, у этих элементов есть потомки:

        
          
          <div> </div><div>  <!-- test --></div><div></div>
          <div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В первом случае потомком является пробел, во втором и третьем — символы переноса строк.

А вот следующие <div>-элементы браузер будет считать пустыми:

        
          
          <style>  .has-content {    content: 'Есть атрибут content';  }  .has-pseudo::before {    content: 'Есть псевдоэлемент ::before';  }</style><div></div><div><!-- test --></div><div class="has-content"></div><div class="has-pseudo"></div>
          <style>
  .has-content {
    content: 'Есть атрибут content';
  }

  .has-pseudo::before {
    content: 'Есть псевдоэлемент ::before';
  }
</style>


<div></div>

<div><!-- test --></div>

<div class="has-content"></div>

<div class="has-pseudo"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В первом случае — внутри тега нет ничего.

Во втором случае — внутри тега присутствует только комментарий.

В третьем случае — имеется только CSS-атрибут content.

В четвёртом случае — имеется псевдоэлемент ::before.

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.