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

* Назад
* Обзор: Building blocks
* Далее

Как вы знаете из курса о 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.

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

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

* Назад
* Обзор: Building blocks
* Далее