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