Как работают attribute selectors в CSS?

Question

Accepted Answer

## Суть

Селекторы по атрибуту матчат элемент не по тегу/классу, а по наличию и значению HTML-атрибута.

## Синтаксис

- `[attr]` — атрибут есть
- `[attr="val"]` — точное значение
- `[attr~="val"]` — слово в списке через пробел
- `[attr|="val"]` — значение или `val-*` (часто для `lang`)
- `[attr^="val"]` / `[attr$="val"]` / `[attr*="val"]` — начинается / кончается / содержит
- флаг `i` — без учёта регистра: `[type="email" i]`

```css
input[type="password"] { letter-spacing: 0.1em; }
a[href^="https"]::after { content: "↗"; }
img[alt*="logo" i] { max-height: 48px; }
```

## Нюансы

Специфичность attribute selector как у класса (0,1,0). Злоупотребление `*=` на больших DOM может быть дороже обычных классов. Для состояний UI лучше классы/`aria-*`, а не хрупкие строковые матчи.

## Итог

Attribute selectors удобны для форм, ссылок и data-атрибутов; помните про специфичность и стоимость.