Від автора: перед копіюванням або редагуванням тексту, необхідно провести його виділення – мишкою, дотиком, жестом або стилусом. За умовчанням в більшості браузерів контент підсвічується яскраво блакитним кольором, але з допомогою CSS це можна змінити.
Псевдо-селектор ::selection визначає спосіб відображення вибраних елементів. Точно так само, як с ::visited, можна змінити значення декількох властивостей: color, background (або окремо background-color і background-image) і text-shadow. Наприклад, код нижче зробить фон виділених елементом червоним:
::moz-selection { background: red; }
::selection { background: red; }
У Firefox на момент написання статті все ще потрібні вендорные префікси для псевдо-селекторів. Зверніть увагу, що вендорний префікс оголошено окремо від звичайного властивості; якщо їх згрупувати, селектори вплинуть один на одного, і ефект буде скасовано.
::selection також можна застосувати тільки до конкретних елементів: у прикладі нижче за виділення заголовків h1 буде змінено його фон.
h1::moz-selection { background: red; }
h1::selection { background: red; }
Через неточне визначення ::selection був видалений з CSS специфікації; але повернувся в Selectors Level 4. Незважаючи на все, браузери за винятком iOS Safari і Opera Mini залишили підтримку псевдо-селектора.
Будьте уважні, якщо ви з допомогою ::selection змінюєте значення background, зберігайте співвідношення контрастності тексту; браузер за вас цього не зробить. Наприклад, для чорного тексту з темним значенням фону в псевдо-селекторі ::selection, необхідно змінити колір виділеного тексту на білий:
h1::moz-selection { background: black; color: white; }
h1::selection { background: black; color: white; }
