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

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 2.0+ 9.5+ 1.1+ 1.0+ 1.0+ 1.0+

Коротка інформація

ЗастосовуєтьсяДо виділеного тексту
Посилання на специфікаціюhttp://www.w3.org/TR/css3-selectors/#selection

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Псевдоелемент ::selection застосовує стиль до виділеного користувачем тексту. У правилах стилів можна використовувати такі властивості: color, background та background-color.

Синтаксис

елемент::selection { ... }

Значення

Немає.

Приклад

HTML5CSS2.1CSS3IECrOpSaFx

<!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>

Результат прикладу показано на рис. 1. У цьому прикладі при виділенні тексту він змінює свій колір та фон.

Браузери

Firefox використовує нестандартний псевдоелемент ::-moz-selection.

Часті запитання

  • Q: Як використовувати псевдоелемент ::selection в CSS?

    A: Використовуючи псевдоелемент ::selection, можна стилізувати вибраний текст на сторінці. Наприклад, можна змінювати колір тексту, фон, шрифт тощо.

  • Q: Де можна використовувати псевдоелемент ::selection в CSS?

    A: Псевдоелемент ::selection можна використовувати на будь-якому елементі, який має текстовий вміст. Наприклад, на заголовках, параграфах або в абзацах.

  • Q: Як змінити колір тексту вибраного тексту за допомогою псевдоелемента ::selection в CSS?

    A: Змінити колір тексту вибраного тексту можна за допомогою властивості color. Наприклад, ::selection { color: red; } змінить колір тексту на червоний.

  • Q: Чи підтримують всі браузери псевдоелемент ::selection в CSS?

    A: Більшість сучасних браузерів підтримують псевдоелемент ::selection, але є винятки. Рекомендується перевіряти сумісність з різними браузерами перед використанням.

  • Q: Чи можна за допомогою псевдоелемента ::selection змінювати фон вибраного тексту в CSS?

    A: Так, за допомогою властивості background-color можна змінювати фон вибраного тексту. Наприклад, ::selection { background-color: yellow; } змінить фон на жовтий.