::selection

Управляем стилями выделенного элемента.

Время чтения: меньше 5 мин

Кратко

Скопировано

Псевдоэлемент ::selection позволяет применить стили к пользовательскому выделению (например, к выделенному с помощью мыши тексту) и изменить его вид. Это полезно, если вы хотите оформить выделение текста в соответствии с вашим дизайном.

Пример

Скопировано

Чтобы увидеть ::selection в действии, выделите текст в демке при помощи курсора мыши или клавиш Ctrl A.

Открыть демо в новой вкладке

Как пишется

Скопировано
        
          
          ::selection {  /* Стили */}
          ::selection {
  /* Стили */
}

        
        
          
        
      

Обратите внимание, что этому псевдоэлементу необходимо двойное двоеточие.

Для Mozilla Firefox версии 61 и ниже нужно использовать вендорный префикс:

        
          
          ::-moz-selection {  /* Стили */}
          ::-moz-selection {
  /* Стили */
}

        
        
          
        
      

Можно оформлять отдельные элементы на странице, задав им псевдоэлемент, или можно оформить всю страницу целиком — оставив ::selection без селектора слева, как показано в примере выше.

Список свойств, которые можно изменять с помощью ::selection, ограничен:

Все прочие CSS-свойства, написанные внутри правила, будут проигнорированы.

На практике

Скопировано

Денис Русаков советует

Скопировано

🛠 Используя ::selection и text-shadow, можно достичь интересного эффекта, задав тексту несколько теней.

        
          
          p::selection {  --color-shadow: #000000;  color: #ffffff;  background-color: #2e9aff;  text-shadow:    1px 0 1px var(--color-shadow),    0 1px 1px var(--color-shadow),    2px 1px 1px var(--color-shadow),    1px 2px 1px var(--color-shadow),    3px 2px 1px var(--color-shadow),    2px 3px 1px var(--color-shadow);}
          p::selection {
  --color-shadow: #000000;
  color: #ffffff;
  background-color: #2e9aff;
  text-shadow:
    1px 0 1px var(--color-shadow),
    0 1px 1px var(--color-shadow),
    2px 1px 1px var(--color-shadow),
    1px 2px 1px var(--color-shadow),
    3px 2px 1px var(--color-shadow),
    2px 3px 1px var(--color-shadow);
}

        
        
          
        
      
Открыть демо в новой вкладке