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

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

CSS Pseudo-Elements Level 4

Примечание¶

Firefox до версии 62 использует нестандартный псевдо-элемент ::-moz-selection.

Примеры¶

Пример 1¶

HTMLCSS

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>

Результат

Цвет и фон выделенного текста

См. также¶

pointer-events

Ссылки¶

Псевдо-элемент ::selection ^{MDN (рус.)}