Css selection: ::selection — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

::selection ⚡️ HTML и CSS с примерами кода

Псевдо-элемент ::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 (рус.)

Псевдоэлемент ::selection | CSS справочник

CSS селекторы

Значение и применение

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

Обращаю Ваше внимание на то, что псевдоэлемент ::selection был добавлен в CSS3*, поэтому необходимо использовать его с двойным двоеточием, это обусловлено тем, что в CSS3 синтаксис для псевдоэлементов был изменён (до этой спецификации псевдоэлементы указывались с одинарным двоеточием).

Для сохранения поддержки старых сайтов, браузеры продолжают распознавать версии ранее введённых псевдоэлементов (с использованием одинарного двоеточия).

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Еще один нюанс в использовании этого псевдоэлемента это то, что браузер Firefox поддерживает его только с префиксом производителя (-moz-).

::selection { /* описание псевдоэлемента для всех браузеров */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
::-moz-selection { /* описание псевдоэлемента для Firefox */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}

Поддержка браузерами

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
::selection4.
0		2.0
-moz-		10.13.19.012.0

CSS синтаксис:

::selection {
блок объявлений;
}

Версия CSS

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

Пример использования

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдоэлемент ::selection</title>
<style>
::selection { /* описание псевдоэлемента для всех браузеров */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
::-moz-selection { /* описание псевдоэлемента для Firefox */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<p>Обыкновенный бегемот, или гиппопотам (лат.
  Hippopotamus amphibius) — млекопитающее из отряда парнокопытных, подотряда свинообразных (нежвачных), семейства бегемотовых, единственный современный вид рода Hippopotamus. Характерной особенностью бегемота является его полуводный образ жизни — большую часть времени он проводит в воде, выходя на сушу лишь ночью на несколько часов для кормёжки. Бегемот обитает только у пресной воды, хотя может изредка оказываться в море.</p>
	</body>
</html>

Результат нашего примера:

Пример использования псевдоэлемента ::selection.

Рассмотрим следующий пример, который позволяет управлять не только цветом текста и задним фоном, но и текстовой тенью:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдоэлемент ::selection с текстовой тенью</title>
<style>

 
 
.chcg::selection {
background-color: violet;
color: white;
}
.chcg::-moz-selection {
background-color: violet;
color: white;
}
.shadow::selection {
text-shadow: 1px 1px 0 red;
}
. shadow::-moz-selection {
text-shadow: 1px 1px 0 red;
}
</style>
</head>
	<body>
		<p>Выделите абзац, чтобы увидеть выделение без стилей.</p>
		<p class = "chcg">Выделите абзац, чтобы увидеть изменения при выделении текста.</p>
		<p class = "shadow">Абзац в котором при выделении к тесту добавляется тень.</p>
		<p>Эта часть абзаца не стилизована <span class = "chcg">, а к этой применяется стиль при выделении.</span></p>
	</body>
</html>
CSS селекторы

::selection — CSS: каскадные таблицы стилей

Псевдоэлемент CSS

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

С ::selection :

  • color
    • можно использовать только определенные свойства CSS.
  • цвет фона
  • text-decoration и связанные с ним свойства
  • тень текста
  • -webkit-text-stroke-color , -webkit-text-fill-color и -webkit-text-stroke-width

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

 :: выбор {
  /* ... */
}

HTML 

 Этот текст имеет специальные стили, когда вы его выделяете.

Также попробуйте выделить текст в этом абзаце.

CSS 

 ::-moz-выбор {
  цвет: золото;
  цвет фона: красный;
}
p::-moz-выбор {
  белый цвет;
  цвет фона: синий;
}
 
 /* Сделать выделенный текст золотым на красном фоне */
:: выбор {
  цвет: золото;
  цвет фона: красный;
}
/* Сделать выделенный текст в абзаце белым на синем фоне */
р :: выбор {
  белый цвет;
  цвет фона: синий;
}

Результат

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

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

Коэффициент цветовой контрастности определяется путем сравнения яркости выделенного текста и цветов фона выбранного текста. Чтобы соответствовать текущим рекомендациям по доступности веб-контента (WCAG), текстовое содержимое должно иметь коэффициент контрастности 4,5:1 или 3:1 для более крупного текста, например заголовков. (WCAG определяет большой текст размером от 18,66 пикселя и 24 пикселя и полужирный шрифт или 24 пикселя или больше.)

  • WebAIM: Color Contrast Checker
  • MDN Понимание WCAG, пояснения к Руководству 1.4
  • Понимание критерия успеха 1.4.3 | Понимание W3C WCAG 2.0
9009 7
Спецификация
Модуль псевдоэлементов CSS, уровень 4
# selectordef-selection

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • указатели-события — контролировать, какие события активны на элементе

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

::выбор | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Используйте курсор, чтобы выбрать это предложение. Заметили, как при выделении текста цвет фона заполняет пространство? Вы можете изменить цвет фона и цвет выделенного текста, настроив ::selection . Стилизация этого псевдоэлемента отлично подходит для сопоставления выбранного пользователем текста с цветовой схемой вашего сайта.

 р::выбор {
  фон: #fff;
  цвет: #ff0000;
}

Обратите внимание, что в синтаксисе этого псевдоэлемента необходимо двойное двоеточие, несмотря на то, что другие псевдоэлементы принимают одинарное двоеточие.

Как показано выше, вы можете использовать стиль ::selection для отдельных элементов. Вы также можете стилизовать всю страницу, перетащив голый псевдоэлемент в свою таблицу стилей.

 :: выбор { фон: желтый; }

Есть только три свойства, с которыми будет работать ::selection :

  • цвет
  • background (в частности, background-color , background-image полные свойства)
  • text-shadow

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

Также не пытайтесь:

 p::-moz-selection,
p::selection { цвет: красный; }

Когда браузеры находят часть выборки, которую они не понимают, они удаляют ее целиком, так что это все время будет терпеть неудачу.

Одним из наиболее полезных применений ::selection является отключение text-shadow во время выбора. Текстовая тень может конфликтовать с цветом фона выделения и затруднять чтение текста. Установить text-shadow: нет; , чтобы сделать текст четким и легко читаемым во время выделения.

Fancy

::selection

В сочетании с Sass или любым другим препроцессором вы можете создавать действительно крутые эффекты с помощью ::selection .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *