Селекторы css по атрибуту, имени

элемент[атрибут] - данный селектор будет выбирать элементы с заданным атрибутом, каким-бы он ни был. Даже можно придумать свой. Работает в ie8.

Пример: img[alt] { border: 1px solid blue; } - все картинки, которые имеют alt
Пример: а[href][title] { color: green; } - свойство применяется только к тем ссылкам, которые имеют два атрибута одновременно.
Пример: a[dr] { background-color: yellow; } <a href="#" dr="yes">ссылка</a> - применяет свойство к вашему атрибуту.

элемент[атрибут=значение] - применяет заданный стиль к элементу с указанным атрибутом и значением. Работает по точному совпадению значения атрибута.

Пример: a[href="https://blogprogram.ru/retro.php"] { font-weight: bold; } - только к ссылке с данным url адресом
Пример: a[target="_blank"] { color: green; } - к ссылки с таким типом открытия
Пример: a[id="ar1"] { background-color: yellow; } - к ссылке с id = ar1
Пример: div[class="are"] { background-color: yellow; } - к div-у с классом = are
Пример: input[type="text"] {width: 200px;} - к input-у с типом = text
Пример: input[name="er2"] {width: 200px;} - по имени
Пример: input[value="12"] {width: 200px;} - по значению поля

Есть различные типы атрибута:
[att~=value] - Атрибуты селектора должны быть разделены пробелами - список слов
[att^=value] - Значение атрибута начинается с заданного значения (”value”).
[att$=value] - Значение атрибута заканчивается на “value”.
[att*=value] - Значение атрибута содержит указанное значение (”value”).

Пример:
a[href*=".jpg"] {background: url(jpg.gif) no-repeat left 50%;}
a[href*=".pdf"] {background: url(pdf.gif) no-repeat left 50%;}
a[href*=".doc"] {background: url(word.gif) no-repeat left 50%;}