Справочник HTML & CSS

[attr]

Выбирает элементы по атрибуту или его значению.

Синтаксис

[attr="value"] { … }

Параметры

Параметр	Тип	Описание
[attr]	presence	Атрибут есть, значение любое.
[attr="v"]	exact	Значение ровно `v`.
[attr^="v"]	starts with	Значение начинается с `v`.
[attr$="v"]	ends with	Значение заканчивается на `v`.
[attr*="v"]	contains	Значение содержит `v` в любом месте.

Примеры

Разные стили для разных типов полей:

<style>
  input[type="text"] { border: 2px solid royalblue; }
  input[type="number"] { border: 2px solid orange; }
</style>
 
<input type="text" placeholder="Name">
<input type="number" placeholder="Age">

Ссылки по началу и концу адреса:

<style>
  a[href^="https"] { color: green; }
  a[href$=".pdf"]::after { content: " (PDF)"; color: gray; }
</style>
 
<p><a href="https://example.com">Secure link</a></p>
<p><a href="/files/price.pdf">Price list</a></p>

Примечания

Специфичность у селектора атрибута такая же, как у класса. Буква i перед закрывающей скобкой отключает учёт регистра: [href$=".pdf" i].

См. также

.class — Выбирает элементы, у которых в атрибуте `class` есть указанный класс.
:not() — Выбирает элементы, которые не подходят ни под один из селекторов в скобках.

В учебнике

Селекторы — Как выбрать элементы для оформления — по тегу, классу, id, вложенности и атрибуту.

Спасибо, что читаете!