Дмитрий Нечаев
Псевдокласс selection. Полное руководство с примерами
25 июля 2024 г.Автор
Псевдокласс ::selection в CSS позволяет вам управлять стилями текста и элементов, которые выделяются пользователем. Это не только добавляет вашему сайту эстетическую привлекательность, но и улучшает пользовательский опыт. В данной статье мы подробно рассмотрим, как использовать псевдокласс ::selection, какие свойства он поддерживает и приведем практические примеры.
Основные понятия
Что такое ::selection?
::selection — это CSS псевдокласс, который применяется к части документа, выбранной пользователем. Это могут быть тексты, выделенные мышью или с помощью клавиатуры.
Применение псевдокласса
Для применения стилей к выделенным элементам достаточно использовать синтаксис ::selection в вашем CSS файле.
::selection {
/* стили */
}Поддерживаемые свойства
Псевдокласс ::selection поддерживает ограниченное количество CSS свойств. Основные из них:
color— цвет текста;background-color— цвет фона;text-shadow— тень текста.
Пример использования
Давайте рассмотрим простой пример, где мы изменим цвет текста и фона при выделении:
::selection {
color: white; /* белый цвет текста */
background-color: #007bff; /* синий фон */
}Этот код изменит цвет текста на белый, а фон выделенного текста на синий.
Поддержка браузеров
Важно учитывать, что не все свойства могут быть поддержаны в различных браузерах одинаково. На момент написания данной статьи псевдокласс ::selection поддерживается большинством современных браузеров, включая:
- Google Chrome
- Mozilla Firefox
- Safari (кроме iOS)
- Microsoft Edge
Пример совместимости с браузерами
/* Общий стиль */
::selection {
color: white;
background-color: #007bff;
}
/* Префикс для старых версий Safari */
::-moz-selection {
color: white;
background-color: #007bff;
}Стилизация различных элементов
Псевдокласс ::selection можно применять ко всему документу или только к конкретным элементам.
Стилизация всего документа
Чтобы применить стили ко всему документу, достаточно использовать ::selection без привязки к конкретным элементам:
::selection {
color: white;
background-color: #007bff;
}Стилизация конкретных элементов
Вы также можете применить ::selection к определенным элементам, например, параграфам (<p>) или заголовкам (<h1>):
p::selection {
color: yellow; /* желтый цвет текста */
background-color: black; /* черный фон */
}
h1::selection {
color: black; /* черный цвет текста */
background-color: yellow; /* желтый фон */
}Практические примеры
Пример 1: Выделение текста в параграфе
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::selection</title>
<style>
p::selection {
color: white; /* белый цвет текста */
background-color: red; /* красный фон */
}
</style>
</head>
<body>
<p>Выделите этот текст, чтобы увидеть изменение стиля.</p>
</body>
</html>Пример 2: Стилизация заголовков
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::selection для заголовков</title>
<style>
h1::selection {
color: black; /* черный цвет текста */
background-color: yellow; /* желтый фон */
}
h2::selection {
color: white; /* белый цвет текста */
background-color: green; /* зеленый фон */
}
</style>
</head>
<body>
<h1>Выделите этот заголовок H1</h1>
<h2>Выделите этот заголовок H2</h2>
</body>
</html>Заключение
Использование псевдокласса ::selection в CSS предоставляет простой способ улучшить визуальное восприятие вашего сайта. Он позволяет настроить стили для выделенного текста, что делает ваш сайт более привлекательным и удобным для пользователей. Следуйте приведенным выше примерам и советам, чтобы эффективно использовать ::selection в своих проектах.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile