Здравствуйте, дорогие читатели. Сегодня я хочу вам рассказать, как оформить с помощью css стиль для выделенного текста, то есть тех текстовых фрагментов, которые вы выделяете курсором мыши.
Псевдокласс :selection
Интересно, что я только недавно узнал об этом псевдоклассе, как-то не попадался на глаза. Между тем на многих сайтах я видел, что если попытаться выделить текст, то к нему применяются интересные стили, отличные от тех, что по умолчанию.
А по умолчанию, как вы знаете, фон становиться синим, а сам цвет текста – белым. Это касается всех веб-сайтов. Так вот, я сильно хотел изменить это оформление на своем сайте, так как синий мне не подходит, но не понимал, как это сделать. Вообще я думал, что делается через скрипты.
И тут я обнаружил замечательный псевдокласс selection, который создан специально для этой цели. Чтобы применить стиль для выделенного текста в любой части страницы, нужно записать так:
:selection{
Color: #fff;
Background: orange;
}
Это так, как стоит у меня. Естественно, вы можете поменять цвета на свои. Вот и все, теперь оформление выделенного текста подходит мне по дизайну, если использовать уточняющие селекторы, то можно для отдельных частей сайта применять другое оформление, но это, как по мне, очень редко где может пригодиться.