::selection

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

• color;
• background-color;
• шорткат text-decoration и отдельные свойства оформления текста;
• text-emphasis-color;
• text-shadow;
• stroke-color, fill-color и stroke-width для SVG.

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

        
          
          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);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать