Селекторы атрибута

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

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

• Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
• li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
• li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Селекторы вхождения подстроки

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

Следующий пример показывает, как используются эти селекторы:

• li[class^="a"] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.
• li[class$="a"] выбирает все значения атрибута, которые заканчиваются на a, что соответствует первому и третьему элементу списка.
• li[class*="a"] выбирает все значения атрибута, где появляется a, независимо от положения в строке, что соответствует всем элементам нашего списка.

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

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

Следующие шаги

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

• Назад
• Обзор: Устройство CSS
• Далее