Что такое селектор атрибутов

Селектор атрибутов в CSS позволяет выбирать элементы по их атрибутам или значениям атрибутов. Основные варианты:

/* Элемент с атрибутом */
[disabled] {
  opacity: 0.5;
}

/* Точное совпадение значения */
[type="text"] {
  border: 1px solid #ccc;
}

/* Частичное совпадение (содержит подстроку) /
[class="btn-"] {
padding: 8px 12px;
}

/* Начинается с */
[href^="https"] {
color: green;
}

/* Заканчивается на */
[src$=".png"] {
border: 1px solid #eee;
}

/* Содержит слово в списке значений */
[class~="active"] {
font-weight: bold;
}

Селекторы атрибутов полезны для стилизации элементов без лишних классов, особенно при работе с формами, ссылками и кастомными элементами.