::selection

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

css
::selection {
  background: cyan;
}

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

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

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

Синтаксис

css
/* синтаксис Firefox */
::-moz-selection {
}

Error: could not find syntax for this item

Пример

HTML

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

CSS

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;
}

Результат

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

Specification
CSS Pseudo-Elements Module Level 4
# selectordef-selection

Совместимость с браузерами

BCD tables only load in the browser