Псевдоклассы :empty и :blank | Когда элемент пустой | CSS

Пустому элементу (тот, который не имеет вложенных потомков, в том числе пробелов и переносов строки Enter), можно задать стиль с помощью псевдокласса :empty [w3.org]. Элементу, содержащему лишь пробельные символы, — псевдокласса :blank [w3.org, пока не поддерживается браузерами].

Как работает :empty

<style>
ol.raz li:empty {
  background: antiquewhite;
}
</style>

<ol class="raz">
  <li></li><!-- между открывающимся и закрывающимся тегом ничего нет -->
  <li><!-- комментарии HTML --></li><!-- между открывающимся и закрывающимся тегом ничего, кроме комментариев, нет -->
  <li> </li><!-- блок содержит дочерний элемент — пробел -->
  <li><!-- li может не иметь закрывающегося тега, он содержит дочерний элемент — перевод строки Enter -->
  <li><li><!-- пятый li не имеет закрывающегося тега, он пуст, так как сразу начинается следующий тег li -->
</ol>

Для input и textarea не так важно заполнены они или нет. Более важно заполнены ли они правильно или нет, а для этого есть псевдоклассы :valid и :invalid

<style>
input.raz:empty { /* у input не бывает закрывающегося тега, он всегда пустой */ 
  background: antiquewhite;
}
</style>

<input type="text" class="raz" value="содержимое атрибута value"/>

содержимое

<style>
textarea.raz:empty { /* при изменении содержимого поля textarea, меняется его атрибут value */ 
  background: antiquewhite;
}
</style>

<textarea class="raz">содержимое</textarea>

Как удалить пустые блоки

Проблема 1. Блок без содержания виден из-за границ и отступов. Нужно скрыть его или пока в блоке ничего нет, показывать подсказку

<style>
div.raz {
  border: 1px solid gainsboro;
  padding: .5em;
  background: whitesmoke;
}
</style>

<div class="raz">Текст</div>
<div class="raz"></div>

<style>
div.dva:not(:empty) { /* стиль для элемента, если он не пустой */ 
  border: 1px solid gainsboro;
  padding: .5em;
  background: whitesmoke;
}
</style>

<div class="dva">Текст</div>
<div class="dva"></div>

<style>
div.tri {
  border: 1px solid gainsboro;
  padding: .5em;
  background: whitesmoke;
}
div.tri:empty:before { /* пример (см. «Перечень кнопок пока пуст») */ 
  content: "Моё сообщение приглушённого цвета, пока блок не заполнен";
  color: darkgray;
}
</style>

<div class="tri">Текст</div>
<div class="tri"></div>

Проблема 2. Пункты li в списках ol и ul имеют маркеры или нумерацию. Нужно убрать их у пустующего li

1. текст
3. текст

<ol>
  <li>текст</li>
  <li></li>
  <li>текст</li>
</ol>

1. текст
3. текст

<style>
ol.dva li:empty {
  display: none;
}
</style>

<ol class="dva">
  <li>текст</li>
  <li></li>
  <li>текст</li>
</ol>

Проблема 3. Убрать из таблицы пустые ячейки или перекрасить их в неактивный цвет

заголовок	заголовок
ячейка		ячейка

<style>
table.raz td,
table.raz th {
  border: 1px solid lightpink;
  background: lavenderblush;
}
</style>

<table class="raz">
    <tr>
       <th>заголовок
       <th>заголовок
       <th>
    <tr>
       <td>ячейка
       <td>
       <td>ячейка
</table>

заголовок	заголовок
ячейка		ячейка

<style>
table.raz td,
table.raz th {
  border: 1px solid lightpink;
  background: lavenderblush;
  empty-cells: hide; /* свойство empty-cells может принимать два значения show
и hide; при последнем значении, если ячейка содержит только пробел или перевод строки Enter, то она будет скрыта */ 
}
</style>

<table class="raz">
    <tr>
       <th>заголовок
       <th>заголовок
       <th>
    <tr>
       <td>ячейка
       <td>
       <td>ячейка
</table>

заголовок	заголовок
ячейка		ячейка

<style>
table.raz {
  border-collapse: collapse; /* empty-cells: hide; не работает вместе с border-collapse: collapse; */ 
}
table.raz td,
table.raz th {
  border: 1px solid lightpink;
  background: lavenderblush;
}
table.raz td:empty,
table.raz th:empty {
  visibility: collapse; /* visibility: collapse; для таблиц лучше visibility: hidden; или display: none;, так как позволяет перестроить таблицу */  
}
</style>

<table class="raz">
    <tr>
       <th>заголовок
       <th>заголовок
       <th></th>
    <tr>
       <td>ячейка
       <td></td>
       <td>ячейка
</table>

заголовок	заголовок
ячейка		ячейка

<style>
table.raz {
  border-collapse: collapse;
}
table.raz td,
table.raz th {
  border: 1px solid lightpink;
}
table.raz td:empty,
table.raz th:empty { /* пример, где начиная со второй строки пустые клетки таблицы закрашены */ 
  background: lavenderblush;
}
</style>

<table class="raz">
    <tr>
       <th>заголовок
       <th>заголовок
       <th></th>
    <tr>
       <td>ячейка
       <td></td>
       <td>ячейка
</table>

Растянуть по высоте пустые inline-block-элементы

<style>
div span {
  display: inline-block;
  border: 1px solid #ccc;
  padding: .5em;
}
</style>

<div id="raz4"><span>Первый</span><span>Второй</span><span></span></div>

<style>
div span {
  display: inline-block;
  border: 1px solid #ccc;
  padding: .5em;
}
div span:empty:before {
  content: "\a0";
}
</style>

<div id="raz4"><span>Первый</span><span>Второй</span><span></span></div>