Скасування виділення тексту в CSS

Вивчаємо властивість user-select, яка дозволяє керувати можливістю виділення та копіювання тексту.

Властивість user-select

За замовчуванням текст на сторінці можна виділяти та копіювати. Властивість user-select дозволяє змінити цю поведінку.

user-select: auto — стандартна поведінка браузера.
user-select: none — текст не можна виділити.
user-select: text — примусово дозволяє виділення.
user-select: all — при кліку виділяється весь вміст елемента.

Приклад заборони виділення

Найчастіше user-select: none використовують для кнопок, іконок, декоративних написів або елементів інтерфейсу, які не потрібно копіювати.


<p class="text">
  Цей текст не можна виділити.
</p>


.text {
  user-select: none;
}

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

📌 Завдання:

№1. Є текст. Забороніть його виділення та копіювання.
№2. Є декілька абзаців із номерами. Зробіть так, щоб номери не копіювалися, а текст абзаців залишався доступним для виділення.

Завдання №1


<p class="text">
  Цей текст не можна копіювати.
</p>

💡 Показати підказку

Для заборони виділення використайте властивість user-select зі значенням none.

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


/* HTML */

<p class="text">
  Цей текст не можна копіювати.
</p>

/* CSS */

.text {
  user-select: none;
}

Завдання №2


<p>
 <span class="number">1.</span>
  Перший абзац тексту.
</p>

<p>
  <span class="number">2.</span>
  Другий абзац тексту.
</p>

<p>
  <span class="number">3.</span>
  Третій абзац тексту.
</p>

💡 Показати підказку

Забороніть виділення лише елементам із номерами, а сам текст залиште доступним для копіювання.

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


/* HTML */

<p>
  <span class="number">1.</span>
  Перший абзац тексту.
</p>

<p>
  <span class="number">2.</span>
  Другий абзац тексту.
</p>

<p>
  <span class="number">3.</span>
  Третій абзац тексту.
</p>

/* CSS */

.number {
  user-select: none;
}

❗ Важливо:

Властивість user-select забороняє лише виділення тексту в браузері. Вона не є засобом захисту інформації, оскільки текст усе одно можна отримати через вихідний код сторінки.