Селектор по атрибуту Помимо обычных селекторов по классу, элементу, идентификатору, в 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="noopener noreferrer">Защищённая ссылка</a> </main> Можно выбрать ссылку следующим селектором: a[rel~="noreferrer"] Обратите внимание на то, что вместо обычного равенства я использовал запись с тильдой: ~=. Этот оператор находит слово внутри строки, где слова разделены пробелами. Подробнее обо всех таких операторах можно прочитать на доке, там очень интересно и наглядно, советую.