Атрибутные селекторы

Атрибутные селекторы позволяют выбирать HTML-элементы по наличию или значению их атрибутов — без добавления дополнительных классов в разметку.

Зачем нужно

Иногда невозможно или нецелесообразно добавлять классы к элементам — например, в CMS-контенте или сторонних виджетах. Атрибутные селекторы позволяют стилизовать элементы по их встроенным атрибутам (href, type, data-*, aria-*), делая CSS более семантичным.

Где используется

  • Стилизация ссылок по типу: внешние, PDF, якорные
  • Стилизация полей формы по type: text, email, checkbox
  • Работа с data-* атрибутами для состояний
  • Стилизация ARIA-атрибутов для доступности

Синтаксис

/* [attr] — элемент имеет атрибут */
[disabled] { opacity: 0.5; }

/* [attr="value"] — точное совпадение значения */
[type="submit"] { background: green; }

/* [attr^="value"] — значение начинается с */
[href^="https"] { color: green; }
[href^="http:"] { color: red; }

/* [attr$="value"] — значение заканчивается на */
[href$=".pdf"] { background: url('pdf-icon.svg') no-repeat; }
[href$=".zip"] { color: orange; }

/* [attr*="value"] — значение содержит подстроку */
[href*="github.com"] { color: #333; }

/* [attr~="value"] — значение — одно из слов в списке */
[class~="active"] { font-weight: bold; }

/* [attr|="value"] — значение равно или начинается с "value-" */
[lang|="en"] { font-family: Georgia, serif; }

/* Без учёта регистра: добавить i */
[href$=".PDF" i] { color: red; }

Примеры

Стилизация внешних ссылок

/* Внешние ссылки — открываются в новой вкладке */
a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* Ссылки на PDF */
a[href$=".pdf"] {
  color: #e44;
  padding-left: 20px;
  background: url('icons/pdf.svg') no-repeat left center;
}

Стилизация полей формы

input[type="text"],
input[type="email"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

input[required] {
  border-left: 3px solid red;
}

Data-атрибуты для состояний

[data-theme="dark"] {
  background: #1a1a1a;
  color: #eee;
}

[data-status="loading"] {
  opacity: 0.6;
  pointer-events: none;
}

Частые ошибки

  1. Регистрозависимость — [href$=".PDF"] не поймает .pdf; добавьте i для нечувствительного к регистру сравнения.
  2. [class="active"] вместо [class~="active"] — точное совпадение не сработает, если у элемента несколько классов; используйте ~= или просто .active.
  3. Высокая специфичность — атрибутный селектор имеет ту же специфичность, что и класс (0, 1, 0); это может неожиданно переопределить другие стили.

Связанные темы

Ресурсы