::selection

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

::selection {
  background: cyan;
}

Разрешённые свойства

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection :

Предупреждение: Заметим, что, в частности, свойство background-image игнорируется.

Синтаксис

/* синтаксис Firefox */
::-moz-selection
Error: could not find syntax for this item

Пример

HTML

<div>Этот текст будет стилизован особым образом при выделении.</div>
<p>Также попробуйте выделить текст в этом параграфе.</p>

CSS

/* Сделаем выделенный текст золотым с красным фоном */
::-moz-selection {
  color: gold;
  background: red;
}

::selection {
  color: gold;
  background: red;
}

/* Сделаем выделенный в параграфе текст белым на синем фоне */
p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::selection' в этой спецификации.		 Рабочий черновик Изначальное определение.

Примечание: Хотя псевдоэлемент ::selection присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута (основываясь на обсуждении в списке рассылки W3C Style). Этот псевдоэлемент был возвращён в Pseudo-Elements Level 4.

Поддержка браузерами

BCD tables only load in the browser