Селектор по атрибуту

Помимо обычных селекторов по классу, элементу, идентификатору, в CSS есть ещё много способов написать более конкретный селектор. Мне очень нравятся варианты селекторов по атрибуту.

Селектор по атрибуту — это дополнительная часть селектора, которая смотрит на любой атрибут тега. Для примера рассмотрим вёрстку:

<main class="content">
  <button type="submit">Отправить форму</button>
  <a href="#">Пустая строка</a>
</main>

Как выбрать все кнопки типа submit на странице? Всё просто, нужно использовать специальный селектор по атрибуту. Выглядеть он будет так:

button[type=submit]

Или же

button[type="submit"]

В нашем случае, записи идентичны. Подобным же образом можно выбрать, например, все пустые ссылки на странице:

a[href="#"]

Ну и, соответсвенно, этот селектор может быть составным с другими селекторами:

.content button[type="submit"] ~ a[href="#"]

Этот селектор выберет ссылку на нашей импровизированной странице.

Также важно сказать, что можно написать селектор не только по полному совпадению значения. Можно также найти, например, подстроку в строке, да и вообще там достаточно много операторов. Например в вёрстке:

<main class="content">
  <a href="#" rel="nofollow noreferrer">Защищённая ссылка</a>
</main>

Можно выбрать ссылку следующим селектором:

a[rel~="noreferrer"]

Обратите внимание на то, что вместо обычного равенства я использовал запись с тильдой: ~=.

Этот оператор находит слово внутри строки, где слова разделены пробелами.

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

#web #theory #useful