Псевдо-селектор: selection

Псевдо-селектор: selection

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

Псевдо-селектор ::selection определяет способ отображения выбранных элементов. Точно так же, как с ::visited, изменять можно только значения нескольких свойств: color, background (или отдельно background-color и background-image) и text-shadow. К примеру, код ниже сделает фон выделенных элементом красным:

В Firefox на момент написания статьи все еще требуются вендорные префиксы для псевдо-селекторов. Обратите внимание, что вендорный префикс объявлен отдельно от обычного свойства; если их сгруппировать, селекторы повлияют друг на друга, и эффект будет отменен.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

::selection также можно применить только к конкретным элементам: в примере ниже при выделении заголовка h1 будет изменен его фон.

Из-за неточного определения ::selection был удален из CSS спецификации; но вернулся в Selectors Level 4. Несмотря на все, браузеры за исключением iOS Safari и Opera Mini оставили поддержку псевдо-селектора.

Будьте внимательны, если вы с помощью ::selection меняете значение background, сохраняйте соотношение контрастности текста; браузер за вас этого не сделает. К примеру, для черного текста с темным значением фона в псевдо-селекторе ::selection, необходимо сменить цвет выделенного текста на белый:

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий