Всем привет! В данной небольшой статье мы рассмотрим псевдоселектор selection. Он позволяет применять стили к выделенному тексту. Итак, поехали!

По умолчанию выделенный текст отображается белым на синем фоне. Это стандартное поведение которое вы можете наблюдать когда выделите какую либо часть контента на сайте. Однако знали ли вы что используя средства css можно задавать свои собственные стили для выделенного контента?! И делается это очень просто через псевдоселектор ::selection.

::-moz-selection{
       background:red;
       color:yellow;
}
::selection{
    background:red;
    color: yellow;
}

Как видите для поддержки в браузере Mozilla firefox необходимо отдельно прописать псевдоселектор selection с вендорным префиксом moz. В результате теперь при выделении контента выделенный текст будет желтого цвета на красном фоне. Да! Мы это сделали.

Если внимательно присмотреться мы применили псевдоселектор ко всем элементам страницы.

Для того чтобы данный псевдоселектор выполнял свою работу для определенного элемента. Достаточно прописать, так:

#p::-moz-selection{
       background:red;
       color:yellow;
}
#p::selection{
    background:red;
    color:yellow;
}

В данном примере к выделенному контенту элемента с идентификатором #p будут применяться заданные стили.

К сожалению в плане свойств стилей для выделения мы ограничены всего двумя. Это background(фон) и color(цвет текста). Другие свойства просто не будут работать.

Однако это не помешает нам придумывать интересный эффект стирания текста курсором мыши.

::-moz-selection{
       background:none;
       color:white;
}
::selection{
    background:none;
    color:white;
}

Благодаря этому коду при условии что у вас белый фон мы реализовали эффект стирания текста с помощью курсора мыши.

Вот в принципе все что я хотел рассказать про псевдоселектор selection. Если у вас остались вопросы, пишите их в комментариях или в группу

На этом у меня все. Желаю вам успехов и удачи! Пока.