Урок 17 із 104
16%
← Назад

Колір виділення тексту в CSS

Вивчаємо псевдоелемент ::selection, який дозволяє змінювати колір тексту та фону під час його виділення.

Псевдоелемент ::selection

Псевдоелемент ::selection використовується для зміни оформлення тексту під час його виділення користувачем.

Найчастіше за допомогою нього змінюють колір фону та колір самого тексту.

Синтаксис


::selection {
  background-color: royalblue;
  color: white;
}

Оформлення окремого елемента

Псевдоелемент можна застосовувати не тільки до всієї сторінки, а й до конкретного елемента.


<p class="text">
  Виділіть цей текст.
</p>

.text::selection {
  background-color: orange;
  color: black;
}
❗ Важливо:

Псевдоелемент ::selection підтримує лише обмежений набір CSS-властивостей. Найчастіше використовують color, background-color та text-shadow.

Практичне завдання

📌 Завдання:
  1. №1. Змініть колір фону виділеного тексту.
  2. №2. Змініть колір тексту під час виділення.
  3. №3. Перевірте результат, виділивши текст на сторінці.
💡 Показати підказку

Використайте псевдоелемент ::selection і властивості background-color та color.

✅ Показати відповідь

::selection {
  background-color: royalblue;
  color: white;
}