Селекторы атрибутов — еще одна область CSS, которая исторически недооценивается и недостаточно используется, частично из-за отсутствия поддержки в ранних версиях браузера Internet Explorer. Хотя селекторы, о которым мы расскажем в этом уроке, поддерживаются во всех современных и многих устаревших версиях браузеров, включая браузер Internet Explorer от версии 7.

Селекторы атрибутов — это простая форма записи регулярных выражений в коде CSS и один из инструментов, которые можно использовать для упрощения записи разметки, что всегда полезно, так как в общем случае чем сильнее можно сократить код HTML и код CSS, тем легче их создавать и поддерживать, и тем более цельным будет выглядеть сайт.

Простой селектор атрибута

abbr[title] { color: black; }

Соответствует следующей записи в коде HTML:

<abbr title="International Business Machines">IBM

Стили задаются всем элементам аббревиатур, у которых есть атрибут название.

input[required] { background: white; }

Соответствует следующей записи в коде HTML:

<input type="number" required>

Стили задаются всем элементам поля ввода, у которых есть указанный атрибут, не зависимо от значения атрибута. Этот селектор не кажется особо полезным, так как большинство элементов содержат одни и те же атрибуты. Следующий атрибут интересней:

Селектор атрибута точного значения

input[type="submit"] { color: orange; }

Соответствует следующей записи в коде HTML:

<input type="submit">

Обратите внимание на отсутствие пробелов в записи селектора. Этот атрибут среди прочего очень полезен для задания стилей элементам форм. Но для его использования нужно знать точное значение атрибута. Это не относится к следующим селекторам.

Селектор атрибута отдельного слова значения

img[alt~=Zealand] { border: 3px solid green; }

Соответствует следующей записи в коде HTML:

<img alt="New Zealand" … >

В то время как селектор атрибута точного значения задает свойства только элементам, у которых значение точно совпадает с указанным, селектор атрибута отдельного слова значения выберет элементы, у которых одно из слов, отделенных пробелами, соответствует заданному.

В спецификации CSS3 добавилось еще три варианта селекторов атрибута:

Селектор атрибута начала значения

a[href^="/al"]

Соответствует следующей записи в коде HTML:

<a href="/all-about-attribute-selectors">

Стили задаются всем элементам ссылок, у которых адрес начинается с указанных символов.

Селектор атрибута конца значения

p[class$="ed"]

Соответствует следующей записи в коде HTML:

<p class="educated">

Еще соответствует и такой записи в коде HTML:

<p class="reed">

Селектор атрибута части значения

a[class*="on"]

Соответствует следующей записи в коде HTML:

<a class="bonobo">

Чувствительность к регистру

В спецификации селекторов CSS 4 уровня добавился признак нечувствительности к регистру:

input[type="submit" i]

Он соответствует следующим записям в коде HTML:

<input type="SUBMIT">,
<input type="submit">

и любым другим сочетаниям.

Но эта возможность поддерживается только современными версиями некоторых браузеров, многие мобильные браузеры и все версии браузеров Internet Explorer и Edge не делают разницы между строчными и прописными буквами для значений атрибутов и могут быть введены в заблуждение признаком нечувствительности к регистру, так что пока мы не советуем его использовать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора псевдоэлемента
• Использование селектора элемента в CSS
• Использование элементов HTML col и colgroup