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

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

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

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

::moz-selection { background: red; }
::selection { background: red; }

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

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

h1::moz-selection { background: red; }
h1::selection { background: red; }

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

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

h1::moz-selection { background: black; color: white; }
h1::selection { background: black; color: white; }

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree