Использование data-* с селекторами атрибутов CSS
Стилизуйте элементы условно на основе значений атрибутов data-*
«Использование data-* с селекторами атрибутов CSS» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Селекторы атрибутов CSS
Селекторы атрибутов CSS выбирают элементы по наличию атрибута и его значению: [data-state] выбирает любой элемент с атрибутом data-state; [data-state="active"] выбирает только элементы, у которых значение равно "active".
Селектор наличия атрибута
[data-tooltip] выбирает элементы с атрибутом data-tooltip независимо от его значения. Используйте его для применения базовых стилей всплывающей подсказки к любому элементу с присоединёнными данными подсказки, прежде чем учитывать её содержимое.
Селектор точного совпадения
[data-theme="dark"] выбирает только элементы, у которых data-theme в точности равно "dark". Это позволяет применять стили на основе темы: задавать тёмные цветовые токены, когда для элемента html JavaScript установил data-theme="dark".
Селекторы частичного совпадения
[data-icon^="arrow"] выбирает значения, начинающиеся с "arrow". [data-label$="ing"] выбирает значения, заканчивающиеся на "ing". [data-tag*="feature"] выбирает значения, содержащие "feature". Это позволяет задавать стили на основе шаблонов без добавления множества классов.
Конечный автомат с data-*
Моделируйте состояние компонента с помощью атрибутов data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. Правила CSS для каждого состояния заменяют множество условных имён классов: состояние хранится в одном атрибуте, а стили остаются явно разделёнными.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Специфичность селекторов атрибутов
Селекторы атрибутов имеют такую же специфичность, как селекторы классов (0,1,0). При объединении с селекторами элементов button[data-variant="primary"] имеет специфичность (0,1,1). Учитывайте специфичность селекторов атрибутов наряду с правилами на основе классов, чтобы избежать конфликтов.
Шаблон всплывающей подсказки
Всплывающая подсказка только на CSS с использованием data-tooltip: при наведении примените ::after { content: attr(data-tooltip) }. Функция content: attr() читает значение атрибута и использует его как содержимое псевдоэлемента — JavaScript или дополнительные элементы HTML не требуются.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* и классы для стилизации
Используйте классы для обозначения назначения стиля (is-active, has-error), а атрибуты data — для полезной нагрузки данных (data-user-id, data-count). Когда один и тот же атрибут управляет и поведением (его читает JS), и стилями (по нему выполняется выбор в CSS), data-* устраняет дублирование между JS и CSS.
Объединение селекторов data-*
Объединяйте несколько селекторов атрибутов: [data-type="button"][data-size="large"] выбирает элементы, у которых установлены оба атрибута. Это создаёт составное условие выбора без необходимости в объединённом классе вроде .button-large и уменьшает разрастание числа классов.
Примечание о производительности
Селекторы атрибутов немного медленнее селекторов классов при вычислении стилей. Для статических стилей предпочитайте классы. Используйте селекторы атрибутов, когда значение атрибута определяет стиль (например, data-state или data-theme) и изменяется во время выполнения — тогда один атрибут заменяет несколько переключаемых классов.
Чувствительность к регистру
По умолчанию сопоставление значений атрибутов в HTML чувствительно к регистру (но не для кодов языков в XHTML). Добавьте флаг i для сопоставления без учёта регистра: [data-state="Active" i] выбирает "active", "Active" и "ACTIVE".
Проверка знаний
Что делает селектор CSS [data-state="loading"] .spinner?
Итоги
Селекторы атрибутов CSS выбирают атрибуты data-* по наличию, точному значению или частичным шаблонам. В сочетании с content: attr() для всплывающих подсказок и data-state для конечных автоматов компонентов атрибуты data-* служат и носителями данных, и точками подключения стилей CSS без разрастания числа классов.
Часто задаваемые вопросы
Урок «Использование data-* с селекторами атрибутов CSS» бесплатный?
Да — полный текст урока «Использование data-* с селекторами атрибутов CSS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Использование data-* с селекторами атрибутов CSS»?
Стилизуйте элементы условно на основе значений атрибутов data-* Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Использование data-* с селекторами атрибутов CSS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис data-* и соглашения об именовании
- Доступ к data-* через dataset в JavaScript
- Использование data-* с селекторами атрибутов CSS
- Практические шаблоны: всплывающие подсказки и отслеживание состояния