Псевдокласс :blank

Псевдокласс :blank добавляет стиль к пустому элементу не содержащий текст или какие-либо другие дочерние элементы. Даже если элемент имеет пробелы или разрыв строки псевдокласс :blank будет считать его “пустым”.

отличие псевдокласса :blank от псевдокласса :empty лишь в том, что псевдокласс :empty определяет стиль для абсолютно пустого элемента.

Применить и определить :blank

Для примера рассмотрим простой элемент HTML для абзаца.

<p></p> // абсолютно пустой элемент 

<p> </p> // пустой элемент с пробелом

Обратите внимание, первый абзац является абсолютно пустым элементом, а у второго есть один пробел.

CSS для псевдокласса :blank

Псевдокласс :blank является селектором четвёртого уровня CSS4.

p:empty {
  border: solid 1px red;
}
p:blank {
  outline: solid 1px green;
}

В примере CSS граница для абсолютно пустого элемента будет красного цвета, а псевдокласс :blank применит стиль к обоим элементам потому что они оба пустые.

Запомните разницу! Псевдоклассы :blank и :empty слишком похожи и это отмечено в спецификации. Возможно название этого селектора в будущем изменится. Кроме этого для Мазилы существует альтернативная версия данного селектора -moz-only-whitespace.

HTML:

<p> </p>

CSS:

p:-moz-only-whitespace::before {
    background-color: lime;
}
Поддержка браузерами псевдокласса :blank
IE Chrome Opera Safari Firefox Android iOS

Еще псевдоклассы CSS4