CSS с селекторами атрибутов
Селекторы атрибутов — мои любимые селекторы.
Их специфичность такая же низкая, как у класса. Но в отличие от класса, поддерживающего только строки, разделённые пробелами, с экранированными специальными символами, селекторы атрибутов дают полный контроль над выбором.
Они настолько мощные, что с их помощью можно хирургически препарировать селектор классов.
За пять минут я расскажу вам о пяти способах практического использования селекторов атрибутов.
Во-первых, синтаксис
Селекторы атрибутов могут быть нацелены на любой атрибут. href из тега <a>, src из тега <img>, атрибуты aria- и data-, да что угодно!
Согласно синтаксису, селекторы атрибутов заключают имя целевого атрибута в скобки.
[href] {
color: red;
}Эта строка окрашивает в красный цвет всё, что содержит атрибут href.
Нужно быть осторожным, потому что другие элементы, например <link>, также имеют атрибут href. Комбинирование селекторов атрибутов с другими селекторами — обычное дело для определения границ.
a[href] {
color: red;
}Хотя <links href> по умолчанию отображается как display:none, рекомендуется использовать явные селекторы атрибутов.
Стиль атрибутов по значению
Как же сделать селекторы атрибутов полезными?
Можно использовать их для идентификации ссылок-пустышек, выбирая селектор href для ссылок с пустым или # атрибутом 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 }
Не бойтесь, это можно решить, если убедиться, что наиболее специфичное правило объявляется последним:
+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, используемых для nav, является aria-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