:empty

Как в CSS определить, что элемент пустой? Легко! При помощи этого псевдокласса.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Псевдокласс :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-комментарии не считаются потомками.

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

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

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

<div>
</div>

        
        
          
        
      

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

А вот такие элементы браузер будет считать пустыми:

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

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

        
        
          
        
      

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

На практике

Секция статьи "На практике"

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

Секция статьи "Денис Ежков советует"

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