::selection¶
Псевдо-элемент ::selection
применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства:
color
background-color
cursor
caret-color
outline
и его подробные свойстваtext-decoration
и его подробные свойстваtext-emphasis-color
text-shadow
.
Псевдо-элементы
- ::after
- ::backdrop
- ::before
::cue
- ::first-letter
- ::first-line
::grammar-error
::marker
::part()
- ::placeholder
- ::selection
::slotted()
::spelling-error
Синтаксис¶
::selection {
background-color: cyan;
}
Спецификация¶
Примечание¶
Firefox до версии 62 использует нестандартный псевдо-элемент ::-moz-selection
.
Примеры¶
Пример 1¶
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
/* Make selected text gold on a red background */
::selection {
color: gold;
background-color: red;
}
/* Make selected text in a paragraph white on a blue background */
p::selection {
color: white;
background-color: blue;
}
Пример 2¶
В данном примере при выделении текста он изменяет свой цвет и фон.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>selection</title>
<style>
p::selection {
color: #ff0; /* Цвет текста */
background: #000; /* Цвет фона */
}
</style>
</head>
<body>
<p>При выделении этого текста он изменит свой цвет.</p>
</body>
</html>
Пример 3¶
Как задать цвет выделения текста?
Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection
, в котором задаются свойства color
и background
, как покаано в примере.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Выделение</title>
<style>
::selection {
background: #809778; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<p>
В условиях электромагнитных помех, неизбежных при
полевых измерениях, не всегда можно опредлить, когда
именно волна ненаблюдаемо стабилизирует кварк
</p>
</body>
</html>
Результат
См. также¶
Ссылки¶
- Псевдо-элемент
::selection
MDN (рус.)