Псевдо-селектор: selection

16

Від автора: перед копіюванням або редагуванням тексту, необхідно провести його виділення – мишкою, дотиком, жестом або стилусом. За умовчанням в більшості браузерів контент підсвічується яскраво блакитним кольором, але з допомогою 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; }