Краткая заметка по псевдо-классу :empty

Reading time ~2 minutes

Я люблю ту простоту, которую привносят CSS3-селекторы в таблицы стилей. В этой статье приведено краткое описание одного из моих любимых селекторов: псевдо-класса :empty.

Что такое псевдо-класс :empty

Вот краткое описание, взятое из спецификации W3C:

Псевдо-класс :empty относится к элементу, у которого нет потомков.

Звучит просто и понятно, не правда ли? Потому что это действительно так - псевдо-класс :empty применяется к элементам, которые полностью пустые; например, для пустого параграфа:

...

Или же пустые ячейки таблицы:

А вот к такому параграфу псевдо-класс :empty не применим, так как он не является пустым (внутри этого тега есть пробел, который является равноправным символом по сравнению со всеми остальными):

...

Практическое применение :empty

Хорошо, но каким образом может быть полезен этот селектор?

Представим ситуацию, когда вы стилизуете таблицу и некоторые из ячеек этой таблицы не имеют данных внутри себя. Тогда вы можете применить к ним другие правила благодаря псевдо-классу :empty.

Давайте возьмем таблицу, которая создавалась мною ранее. Я собираюсь использовать те же самые таблицы стилей, но сделаю их более упрощенными. Также я собираюсь удалить содержимое из некоторых ячеек для того, чтобы сделать пример соответствующим статье.

Разметка будет выглядеть таким образом:

 scope="col" rowspan="2">Some headings
   scope="col" colspan="4">More headings
  scope="col">Great
   scope="col">Brilliant
   scope="col">Genius
   scope="col">Good
  scope="row">Interesting totals
   scope="row">Curious
   scope="row">Awesome
   scope="row">Fabulous
   scope="row">Nice
  
A simple table
155 165 70 140
5 35 50 15
75 90 5
30 20 80
45 40 40

И вот, что я собираюсь добавить в таблицы стилей, для того чтобы отформатировать пустые ячейки таблицы:

tbody td:empty {
 background: #efefef;
}

А вот теперь пустые ячейки таблицы отформатированы по-другому! Мне кажется, что невозможно сделать это более простым способом.

Если вас этот селектор заинтересовал, то скажу, что он поддерживается всеми последними версиями браузеров Firefox, Safari, Chrome и Opera. И возможно, он работает в браузере Internet Explorer 9, наравне с остальными селекторами стандарта CSS3.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке