`::selection` CSS-псевдоэлемент

::selection — это CSS-псевдоэлемент, который применяет стили к части документа, выделенной пользователем (например, при нажатии и перетаскивании мыши по тексту).

Псевдоэлемент ::selection использует особую модель наследования, общую для всех псевдоэлементов подсветки. Подробнее о том, как работает это наследование, см. в разделе Наследование псевдоэлементов подсветки.

Попробуйте

p::selection {
  color: red;
  background-color: yellow;
}

<p>
  Select a fragment of this paragraph, to see how its appearance is affected.
</p>

Допустимые свойства

С ::selection можно использовать только определённые свойства CSS:

• color
• background-color
• text-decoration и связанные с ним свойства
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color и -webkit-text-stroke-width

В частности, background-image игнорируется.

Синтаксис

::selection {
  /* ... */
}

Доступность

Не переопределяйте стили выделенного текста исключительно из эстетических соображений — пользователи могут настроить их в соответствии со своими потребностями. Для людей с когнитивными особенностями или недостаточной технической грамотностью неожиданные изменения стилей выделения могут затруднить понимание функциональности.

Если стили переопределяются, важно обеспечить достаточно высокий коэффициент контрастности между цветами текста и фона выделенного фрагмента, чтобы люди с нарушениями зрения могли его прочитать.

Коэффициент контрастности цветов вычисляется путём сравнения яркости цвета выделенного текста и цвета его фона. Согласно действующим Рекомендациям по обеспечению доступности веб-контента (WCAG), коэффициент контрастности текстового содержимого должен составлять 4.5:1 или 3:1 для более крупного текста, например заголовков. (Согласно WCAG, крупный текст — это текст размером от 18.66px до 24px и полужирный либо размером не менее 24px.)

• WebAIM: проверка контрастности цветов
• MDN: пояснения к рекомендациям WCAG, руководство 1.4

• [Понимание критерия успеха 1.4.3

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

Примеры

HTML

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

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

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

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

Результат

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

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

См. также

• pointer-events — управление событиями, активными для элемента