В CSS очень много селекторов. Некоторые из них позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор. Например, css селекторы атрибутов.
Как выбрать элемент по его html-атрибуту
Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Сразу приведу несколько примеров, чтобы было понятно:
*[href] – выбирает все элементы, которые имеют атрибут href с любым значением.
input[disable] – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input[type = “password”] – выбирает все поля, тип которых password, то есть поля для ввода пароля.
img[src = “logo.png”] – выбирает картинку, у которой задан атрибут src = “logo.png”.
Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.
Продвинутые css селекторы атрибутов
Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div[class^= “block”] – выбирает все div-ы, у которых есть стилевой класс, начинающийся на “block”. Таким образом, будут выбраны, например, такие блоки: “block-head”, “block-3”, “blocknote”. Главное, чтобы в начале значения было ключевое слово.
Поиск в конце строки
A[href$= “.rar”] – выбирает все ссылки, у которых адрес заканчивается на .rar. Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.
Поиск подстроки везде в значении
span[class*= “art”] – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.
Поиск префиксов
p[class|= “first”] – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first-, с которого начинается имя класса.
Поиск слов внутри значения
input[id~= “text”] – выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text. Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.
Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.
Для чего могут пригодиться селекторы атрибутов
С помощью подобных селекторов можно выбирать многие html-элемента, не задавая им стилевых классов. В некоторых случаях благодаря такому способу можно сократить код и упростить себе работу. Например, выше я приводил пример с иконкой для архивов. Тут появилась еще одна идея. Например, на своем сайте вы часто ссылаетесь на один другой ресурс (википедию, скажем) и хотите рядом с ссылками на википедию отображать специальную иконку, которой у других ссылок быть не должно.
Реализовать это можно так:
a[href^= “http://ru.wikipedia.org/”] {css-правила}
Так мы выбрали все ссылки, адрес который начинается с http://ru.wikipedia.org/ то есть по сути все ссылки на русскоязычную википедию.
На самом деле способов применения селекторов атрибутов можно придумать еще много. Они могут в какой-то мере упростить работу там, где это нужно. Используйте css и подписывайтесь на блог, чтобы узнавать больше о веб-разработке.