Селекторы атрибута
Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Задача: | Узнать, что такое селекторы атрибута и как их использовать. |
Селекторы наличия и значения
Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.
| Селектор | Пример | Описание |
|---|---|---|
[attr] |
a[title] |
Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках). |
[attr=value] |
a[href="https://example.com"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек. |
[attr~=value] |
p[class~="special"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений. |
[attr|=value] |
div[lang|="zh"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис. |
В приведённом ниже примере вы можете увидеть использование этих селекторов.
- Используя
li[class],мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого. li[class="a"]выбирает селектор с классомa, но не селектор с классомaв сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.li[class~="a"]выберет классa, а также значение, которое содержит классaкак часть разделённого пробелом списка. Он выберет второй и третий пункты списка.
Селекторы вхождения подстроки
Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
| Селектор | Пример | Описание |
|---|---|---|
[attr^=value] |
li[class^="box-"] |
Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value. |
[attr$=value] |
li[class$="-box"] |
Выбирает элементы с атрибутом attr, значение которого заканчивается на value. |
[attr*= ] |
li[class*="box"] |
Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки. |
(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)
Следующий пример показывает, как используются эти селекторы:
li[class^="a"]выбирает все значения атрибута, которые начинаются сa, что соответствует первым двум элементам списка.li[class$="a"]выбирает все значения атрибута, которые заканчиваются наa, что соответствует первому и третьему элементу списка.li[class*="a"]выбирает все значения атрибута, где появляетсяa, независимо от положения в строке, что соответствует всем элементам нашего списка.
Чувствительность к регистру
Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
Примечание:
Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
Следующие шаги
Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.