::selection
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Псевдоэлемент ::selection
позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).
::selection {
background: cyan;
}
Разрешённые свойства
Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection
:
color
background-color
cursor
caret-color
outline
и его длинные записиtext-decoration
и связанные свойстваtext-emphasis-color
text-shadow
Предупреждение:
Заметим, что, в частности, свойство 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;
}
Результат
Спецификации
Specification |
---|
CSS Pseudo-Elements Module Level 4 # selectordef-selection |
Совместимость с браузерами
BCD tables only load in the browser