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

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Как вы знаете из изучения 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, или элементы с атрибутом attr содержащим одно или несколько значений, по крайней мере одно из которых соотвествует value.

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

[attr|=value] div[lang|="zh"] Сопоставляет элементы с именем атрибута attr чье значение может быть точно равно value или может начинаться с value immediately followed by a hyphen.

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

  • By using li[class] we can match any selector with a class attribute. This matches all of the list items except the first one.
  • li[class="a"] matches a selector with a class of a, but not a selector with a class of a with another space-separated class as part of the value. It selects the second list item.
  • li[class~="a"] will match a class of a but also a value that contains the class of a as part of a whitespace-separated list. It selects the second and third list items.

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

Эти селекторы позволяют более тщательно сопоставлять подстроки внутри значения вашего атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите сопоставить все, что начинается со стороки "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.

Попробуйте это

В живом примере ниже, добавьте CSS используя атрибуты селекторов, чтобы сделать следующее:

  • Задайте для элемента <a> атрибут title и сделайте розовую рамку (border-color: pink).
  • Задайте для элемента <a> атрибут href, который сожержит слово contact где-то в его значении и сделайте вокруг оранжевую рамку (border-color: orange).
  • Задайте для элемента <a> значение href, начинающееся с https и обведите его в зеленую рамку (border-color: green).

Примечание: Вы омжете посмотреть решение здесь — но для начала попробуйте разобраться самостоятельно!

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

Now we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS