Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

selection css

Всем привет! В данной небольшой статье мы рассмотрим псевдоселектор 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. Если у вас остались вопросы, пишите их в комментариях или в группу

вк.

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

Оцените статью

Еще статьи

кэш HTML

Javascript генераторы

HTML Drag-and-drop

Откат GIT

JavaScript мышь

произношение javascript

Broadcast Channel

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.