Выбор элементов по атрибутам data-role в CSS

Быстрый ответ

Чтобы выделить элементы по атрибуту в CSS, применяйте селекторы атрибутов:

• [attr]: Выделение элементов с атрибутом attr, без учёта его значений.
• [attr=value]: Выбор элементов с атрибутом attr, присвоение которому прикладывает значение value.
• [attr*=value]: Выделение элементов, у которых атрибут attr включает в себя подстроку value.

Например:

/* Делаем элементы с атрибутом 'data-state' насыщенными */
[data-state] { font-weight: bold; }

/* Окрашиваем в зелёный тон ссылки, ведущие на '#home' */
a[href="#home"] { color: green; }

/* Кнопкам отправки форм добавляем ярко-красный фон */
button[type*="submit"] { background: red; }

Степень гибкости селекторов атрибутов заключается в том, что они позволяют сконцентрироваться на атрибутах и детально настраивать стили.

Поглубже в селекторы атрибутов

Селекторы атрибутов предлагают изумительные возможности для выбора необходимых элементов как великолепные костюмы для вашего HTML! Начиная от изысканных украшений до специальных data-атрибутов, они способны преодолеть любые препятствия в стилизации.

• Точное соответствие: [attr='value'] идеально подходит, когда требуется уникальный стиль для определенного элемента.
• Частичное совпадение: [attr*='partOfValue'] используется для широкомасштабного выбора.

Селекторы не делают различий между атрибутами, будь то классические атрибуты или data-атрибуты HTML5 (data-*), что способствует как усилению семантической верстки, так и повышению доступности.

Когда применять тот или иной селектор

• Состояния интерфейса: [data-state='active'] динамически и мгновенно изменяют стили.
• Языковые особенности: [lang|='en'] демонстрируют мощь CSS на многоязычных сайтах, обеспечивая работу с атрибутами, содержащими дефис.
• Адаптивные трюки: [size~='large'] позволяют применять стили в зависимости от размера элемента.

Подробнее об этом расскажет наш спикер на видео

Использование селекторов в связке

Максимизируйте потенциал селекторов атрибутов, создавая стильное волшебство с их помощью:

/* Неактивная активная кнопка выглядит... мрачно */
button[data-state='active'][disabled] {
  background-color: blue; 
  cursor: not-allowed;
}

Некоторые сложности при работе с селекторами атрибутов

Проблема регистрозависимости

Селекторы атрибутов чувствительны к регистру. Используйте модификатор i для поиска без учета регистра:

/* Верхний или нижний регистр значения не влияет */
[attr='value' i] {
  color: purple;
}

Проблемы производительности

Использование селекторов атрибутов может замедлить рендеринг страницы, особенно при поиске подстрок. Если скорость имеет значение, отдавайте предпочтение классам или ID.

Совместимость в браузерах

Прежде чем начать использовать специфические селекторы, проверьте их совместимость на Can I use..., чтобы избежать проблем с кроссбраузерностью.

Визуализация селекторов атрибутов

Можно представить CSS как ящик с инструментами, где каждый инструмент подбирается под свои «винты» (элементы HTML).

Ящик с инструментами (CSS):
   |*гаечный ключ*| (тип элемента)     |🔧|
   |*рулетка*| (класс)                  |📏|
   |*молоток*| (id)                     |🔨|
   |*отвёртка*| (**атрибут**)           |🔩|

Селекторы атрибутов (🔩) как отвёртки:

/* Вам нужна отвёртка? Воспользуйтесь селектором атрибута */
[wrench-size='10mm'] {
    /* "Окрашиваю в жёлтый, потому что я '10mm'" */
    background-color: yellow;
}

Селекторы атрибутов играют ключевую роль в тонкой подстройке стилей.

Повышаем навыки в CSS

Расширение возможностей

Добавьте комбинированные селекторы в ваш арсенал для создания выразительных стилей:

• Совмещайте селекторы атрибутов для точной стилизации.
• Комбинируйте их с классами и тегами для усиления своих «стилевых возможностей».

CSS и JS во взаимодействии

Селекторы атрибутов CSS отлично подходят для использования вместе с document.querySelector в JavaScript:

// Стиль JavaScript в духе CSS
const activeButtons = document.querySelectorAll('button[data-state="active"]');

Это приводит к созданию выдающегося интерактивного интерфейса, реализованного с помощью сочетания CSS и JS.

Использование нестандартных атрибутов

Несмотря на то, что браузеры могут не принимать нестандартные атрибуты, всегда используйте data-атрибуты для пользовательских данных: таким образом вы сохраните целостность HTML и сможете разделить ответственность.

Полезные материалы

1. Справочник по селекторам CSS от W3Schools — полный руководство по всем селекторам в CSS.
2. Селекторы атрибутов CSS на сайте MDN — официальная документация MDN по селекторам атрибутов.
3. Всё о селекторах атрибутов CSS от CSS-Tricks — детальное руководство по использованию селекторов атрибутов.
4. Войны специфичности в CSS от Stuff & Nonsense — обзор специфичности в CSS.
5. Can I use... — таблицы поддержки HTML5, CSS3 и других веб-технологий — инструмент для проверки совместимости с браузерами перед тем, как применить определённые CSS-селекторы.