Практически все верстальщики знают о существовании селекторов атрибутов css и хоть раз да встречали у себя в коде конструкции из разряда input[type="submit"], но лишь избранные единицы знают, что на самом деле их существует 7 разновидностей, каждая из которых открывает достаточно широкие возможности по отбору тегов из кода нашей страницы.

Описание селектора атрибутов CSS

Основная цель — отбор тегов из html кода страницы по определенному атрибуту, группе атрибутов или их значению.

Синтаксис – квадратные скобки внутри которых находится название атрибута.

Классификация и использование селекторов атрибутов

По наличию атрибута

[title] {
   text-decoration: underline;
}

Позволяет отобрать все элементы у которых задан атрибут с определенным названием. В нашем примере все теги у которых прописан title станут подчеркнутыми.

По точному значению атрибута

input[type="submit"] {
   background-color: green;
}

Пожалуй наиболее часто встречающаяся разновидность данного атрибута. Задает точное соответствие. Будут выбраны только те input, у которых атрибут type задан submit.

По частичному значению атрибута

p[class~="useful"] {
   color: red;
}

Позволяет отобрать элементы, среди заданных значений которых присутствует наше. Для лучшего понимания поясню на примере: все p у которых среди заданных классов встречается useful попадут под данный селектор. (“useful superText”- попадет,  “useful”- попадет,  “superText”- не попадет).

Селектор классов по сути является частным случаем данного селектора атрибутов.

По конкретным значениям атрибутов

[lang|="en"] {
   font-style: italic;
}

Отбор по атрибуту значение которого равно значению селектора или же содержит в себе данное значение с идущим после него дефисом.

Чтобы лучше понять скажу, что в примере элементы с lang="en", lang="en-us", lang="en-au" будут выбранны, а с lang="ru", lang="english" нет.

По началу значения атрибута

[alt^="pony"] {
   margin-bottom: 20px;
}

Отберет атрибуты значение которых начинается с заданного нами. Пояснения: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” — будут выбраны, alt=”I want pony” — не будет выбрано.

По окончанию значения атрибута

В целом принцип действия аналогичен предыдущему атрибуту, но на этот раз значение должно быть в конце атрибута.

img[src$=".png"] {
   width: 150px;
}

дизайн макет сайта в фигме заказать.

В примере будут выбраны все изображения, ссылающиеся на файлы .png.

По подстроке в значении атрибута

Логичным после двух предыдущих будет селектор, который выбирает элементы  в которых встречается интересное нам значение вне зависимости от его расположения внутри атрибута.

a[href*="vaden-pro.ru"] {
   font-size: 120%;
}

Выберутся все элементы включающие в себя интересную нам подстроку. Пояснение: ссылки с атрибутами href=”/” , href=”vaden-pro.ru”, href=” /vse-o-selektorah” — будут выбраны, а href=”http://vadenpro.ru” уже нет.

Комбинирование

a[title] {
   text-decoration: underline;
}

Мы можем комбинировать данные селекторы с другими для получения более точных результатов. Так, данной конструкцией мы подчеркнем все ссылки на странице с заданным тайтлом.

a[title][href*="vaden-pro.ru"] {
   text-decoration: underline;
}

А так мы подчеркнем только те ссылки у которых прописан тайтл и которые ссылаются на сайт vaden-pro.ru.