🕵️‍♂️ Як працює :empty у CSS: приховування, дебаг і практичні кейси

Якщо ваш макет “ламається” і ви не розумієте чому, можливо, винні порожні елементи. Використовуйте псевдоклас :empty, щоб їх приховати або знайти проблемні місця в розмітці.

🙈 Приховуємо порожні елементи

p:empty {
  display: none;
}

• Це правило приховає <p>, які не мають дочірніх елементів або текстових вузлів.
• Якщо параграф містить хоча б один пробіл, він не буде прихований.
• Це корисно для видалення зайвих порожніх <p>, які можуть з’явитися через помилки в текстових редакторах.

🔍 Використання :empty для дебагу

Іноді при верстці виникає питання: “Чому цей блок займає місце, хоча він пустий?” Ми можемо швидко знайти такі проблеми, додавши контур для всіх порожніх елементів:

*:empty {
  outline: 1px solid red;
}

🔥 Коли це корисно?

• При роботі з CSS Grid: :empty допомагає знайти порожні елементи, які можуть займати зайві комірки.
• В flex-контейнерах: пусті елементи можуть впливати на розподіл простору.
• В форматованому тексті: приховані абзаци можуть додавати зайві відступи.

📌 Приклад проблеми з CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-container div {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

.grid-container div:empty {
  outline: 2px dashed red;
}

<div class="grid-container">
  <div>1</div>
  <div></div> <!-- Це порожній div, але він все одно займає місце -->
  <div>3</div>
</div>

У цьому випадку другий div буде виділений червоною рамкою, що допоможе виявити проблему.

❌ Чого :empty не приховає?

1 CSS-контент все ще вважається “порожнім” Якщо ми додаємо текст через content: "", браузер все одно вважає такий елемент порожнім:

span:empty::before {
  content: "🚀";
  color: red;
}

Цей span все ще :empty, хоча в ньому є видимий текст.

2   (нерозривний пробіл) вважається контентом Пробіли (“ “) або   у <p> чи div роблять його непорожнім:

<p>&nbsp;</p> <!-- Цей абзац не буде вважатися порожнім -->

📌 Рішення — використовувати :not(:empty) для пошуку реального контенту.

🎯 Використання :not(:empty)

Можемо зробити протилежне — вибрати тільки заповнені елементи:

p:not(:empty) {
  background: lightgreen;
  padding: 5px;
}

🔥 Де корисно?

• Стилізувати тільки ті <p>, де є текст.
• Визначити блоки, які містять корисний контент.
• Покращити UX, показуючи стилізацію тільки на активних елементах.

🏁 Висновок

• :empty допомагає приховувати зайві порожні елементи та очищати контент.
• Використовуйте його для дебагу, щоб знайти непомітні проблеми з розміткою.
• Знайте обмеження: content: "" все ще вважається порожнім, а   — ні.
• Комбінуйте :empty і :not(:empty), щоб керувати візуальним відображенням елементів.