Сегодня поговорим об азах, которые помогут лучше понять некоторые тонкости использования псевдоселекторов. Вероятно, вы знаете, что если любая из частей селектора неверна, то весь селектор не сработает. 

Например:

div, span::butt {
  background: red;
}

Хотя блок — абсолютно верный селектор, селектора  span::butt не существует, так что весь селектор не сработает — ни у блоков, ни у элементов span::butt на веб-странице не будет красного фона.

Обычно это не очень большая проблема. Это может быть даже удобно, в зависимости от ситуации. Но есть и много ситуаций, в которых это создает сложности.

Вот распространенный пример:

::selection {
  background: lightblue;
}

Долгое время браузер Firefox не понимал этого селектора и ему требовался селектор с приставкой производителя ::-moz-selection для создания этого эффекта. Селектор с приставкой производителя больше не нужен в этой ситуации, начиная с версии 62 браузера Firefox, но подобные ситуации существуют постоянно.

Другими словами, следующая запись была невозможна:

/* не сработает во всех браузерах */
::selection, ::-moz-selection {
  background: lightblue;
}

Запись выше не сработает как в браузерах, которые понимают первый селектор, так и в браузере Firefox, который понимает только второй селектор.

Это было настолько неудобно, что со временем браузеры это исправили. Так что теперь в документации Mozilla Developer Network на эту тему сказано:

«В общем случае если в цепочке или группе селекторов присутствует неверный пседоэлемент или псевдокласс, то весь селектор не срабатывает. Если у псевдоэлемента, но не у псевдокласса, есть приставка производителя -webkit-, то браузер Firefox, начиная с версии 63, а также браузеры на движках Blink, Webkit и Gecko считают его верным и весь селектор сработает.»

Это относится не ко всем селекторам, а именно к псевдоэлементам, т. е., тем, которые записываются с двумя двоеточиями в начале.

В примере ниже можно увидеть, работает ли это в используемом вами в данный момент браузере. Если у текста есть пунктирная рамка, то неверный псевдоэлемент с приставкой производителя -webkit- игнорируется как часть селектора:

Мы считаем это положительным изменением.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование однострочных и многострочных таблиц стилей CSS
• Использование возможностей декорирования выделения элементов
• Использование синтаксиса селекторов CSS