Псевдокласс empty задает то, как будет выглядеть пустой элемент (не содержащий текста).

Синтаксис

селектор:empty {
	
}

Примеры

Пример

В данном примере последняя li пустая, но все равно будет обведена границей и иметь маркер (зависит от браузера):

<ul>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li></li>
</ul>
li:empty {
	border: 1px solid blue;
	list-style-type: circle;
	color: blue;
}

Результат выполнения кода:

  • пункт
  • пункт
  • пункт
  • пункт

Пример

А сейчас поменяем поведение для пустой ячейки:

li:empty {
	border: 1px solid blue;
	list-style-type: circle;
	color: blue;
}

Результат выполнения кода:

  • пункт
  • пункт
  • пункт
  • пункт

Пример

Удалим пустые li совсем:

<ul>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li></li>
</ul>
li:empty {
	display: none;
}

Результат выполнения кода (пустая li не покажется):

  • пункт
  • пункт
  • пункт
  • пункт