Управляем стилями выделенного элемента с помощью CSS псевдокласса selection

Главная

База знаний

css

Псевдоэлементы в CSS

Псевдокласс selection. Полное руководство с примерами

28 октября 2025

Автор

Дмитрий Нечаев

Псевдокласс ::selection в CSS позволяет вам управлять стилями текста и элементов, которые выделяются пользователем. Это не только добавляет вашему сайту эстетическую привлекательность, но и улучшает пользовательский опыт. В данной статье мы подробно рассмотрим, как использовать псевдокласс ::selection, какие свойства он поддерживает и приведем практические примеры.

Основные понятия

Что такое `::selection`?

::selection — это CSS псевдокласс, который применяется к части документа, выбранной пользователем. Это могут быть тексты, выделенные мышью или с помощью клавиатуры.

Применение псевдокласса

Для применения стилей к выделенным элементам достаточно использовать синтаксис ::selection в вашем CSS файле.

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

Поддерживаемые свойства

Псевдокласс ::selection поддерживает ограниченное количество CSS свойств. Основные из них:

color — цвет текста;
background-color — цвет фона;
text-shadow — тень текста.

Управление стилем выделенного текста может значительно улучшить пользовательский опыт на вашем сайте. Псевдокласс ::selection предоставляет такую возможность. Но для реализации действительно интересных и полезных эффектов, важно понимать, как работает каскад стилей, как применять различные свойства CSS и как учитывать доступность для пользователей с ограниченными возможностями. Если вы хотите детальнее изучить CSS и научиться создавать сложные и красивые веб-страницы, — приходите на наш большой курс HTML и CSS. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Пример использования

Давайте рассмотрим простой пример, где мы изменим цвет текста и фона при выделении:

::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 в своих проектах.

Использование псевдокласса ::selection позволяет добавить интерактивности и индивидуальности вашему сайту, но это лишь один из аспектов современного веб-дизайна. Для создания полноценных и привлекательных веб-сайтов необходимо владеть множеством других технологий и инструментов. На нашем курсе HTML и CSS вы получите все необходимые знания и практические навыки для успешной работы. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.

Псевдоэлементы в CSS. Полное руководство с примерами