CSS: Введение в селекторы атрибутов

Селекторы атрибутов - мои любимые селекторы.

Их специфичность, как у классов. Но в отличие от класса, который поддерживает только строки с разделителями пробелами и экранированными спецсимволами, селекторы атрибутов дают полный контроль над вашим выбором.

Они настолько мощные, что вы можете использовать их для хирургического анализа селектора классов.

В течение пяти минут, я покажу пять способов практического использования селектора атрибутов.

Во-первых, синтаксис

Селекторы атрибутов могут использовать любой атрибут: href из тега <a>, src из тега <img>, атрибуты area- и data- которым вы сами даёте названия!

В соответствии с синтаксисом селектора атрибутов, имя целевого атрибута заключается в квадратные скобки.

[href] { color: red };

Эта строка окрашивает всё, что имеет атрибут href в красный цвет.

Комбинирование селекторов атрибутов с другими селекторами - обычное явление для определения области действия.

a[href] { color: red };

Стилизация атрибута по значению

Так как же сделать селекторы атрибутов полезными?

Мы можем использовать их для идентификации ссылок-заполнителей, определив на href селектор на ссылки с пустым значением или # значением.

a[href=""],
a[href="#"] { color: red }

= указывает на точное соответствие для значения атрибута. Как показано выше, нам нужно добавить правило для каждого случая, для точного совпадения.

Но есть и другие методы сравнения.

Мы так же можем сравнивать с началом строки. Добавим ещё один случай небезопасных http-ссылок:

a[href=""],
a[href="#"],
a[href^="http:"] { color: red }

^= соответствует любому значения, которое начинается с указанной подстроки.

И наоборот, если использовать $=, то будет сравнивать с концом строки. Но я не считаю его слишком полезным. В конце URL может быть что угодно.

К счастью, существует *= для сравнения с подстрокой в любом месте значения атрибута.

Давайте воспользуемся им, что бы сделать URL с фрагментом идентификатора зелёным:

a[href=""],
a[href="#"],
a[href^="http:"] { color: red }
+ a[href*="#"] { color: green }

Внимание! Этот селектор так же включает URL-адреса, которые содержат только #! Это означает, что ссылки-заполнители, так же стали зелёными.

Что бы это исправить, мы решим проблему убедившись, что последним идёт более конкретное правило:

+ a[href*="#"] { color: green }
a[href=""],
a[href="#"],
a[href^="http:"] { color: red }
- a[href*="#"] { color: green }

Стилизация по состоянию

Стилизация по атрибуту означает, что мы так же можем стилизовать по состоянию. Рассмотрим атрибут [disabled] у тэга <input>. Мы можем использовать для стилизации input[type="text"][disabled].

Используя этот подход, мы можем пойти дальше используя атрибуты aria. Одна метка атрибута aria используется для навигации - это area-current. Давайте использовать его для стилизации метки и текущей страницы:

[aria-current="true"],
[aria-current="page"] {
  color: fuchsia;
}

Создайте свой собственный язык разметки с атрибутами данных

До этого мы использовали только стандартные атрибуты элемента. Мы можем пойти дальше с атрибутами data.

data - это префикс атрибута, который можно использовать для безопасного создания и использования новых атрибутов в вашем коде.

Давайте обернём все наши отладочные селекторы в новый data селектор атрибутов: data-debug-links.

+ [data-debug-links] {
  a[href*="#"] { color: green }

  a[href=""],
  a[href="#"],
  a[href^="http:"] { color: red }
+ }

Теперь мы можем включать и отключать этот стиль отладки ссылок, добавив data-debug-links элементу.

Спасибо, что прочитали это краткое введение в селекторы атрибутов. Посмотреть пример на Codepen