Attribute selectors

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

Селекторы по атрибутам - это особый вид селекторов, позволяющий искать элементы по их атрибутам attributes и значениям этих атрибутов. Выглядят они так: квадратные скобки ([]), внутри которых записано имя атрибута и, если нужно, условие, которому должно соответствовать значение атрибута. Селекторы атрибутов, в зависимости от того, как они проверяют значения атрибутов, делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута.

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

Эти селекторы выделяют элементы на основе точного значения атрибута:

  • [attr] : Этот селектор выбирает все элементы с атрибутом attr, вне зависимости от его значения.
  • [attr=val] : Этот селектор выбирает все элементы с атрибутом attr, имеющие значение val.
  • [attr~=val]: Этот селектор выбирает все элементы с атрибутом attr, значение которого попадает в список разделенных пробелами значений val, например является одним из классов в списке классов, разделенных пробелами.Let's look at an example featuring the following HTML snippet:
Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

Простая таблица стилей:

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

Результат:

Примечание: Атрибуты data-*, используемые в данном примере, называют атрибутами данных. Они дают возможность хранить пользовательские данные в атрибуте HTML, так что их потом легко извлечь и использовать. Подробнее об этом рассказано в Как использовать атрибуты данных.

Селекторы подстроки в значении атрибута

Селекторы по атрибутам этого типа еще называют "Селекторы типа регулярных выражений ("RegExp-like selectors"), поскольку они предлагают гибкий способ проверки условий, подобно тому, как это делают регулярные выражения (regular expression) (здесь следует уточнить, что эти селекторы все же не являются регулярными выражениями как таковыми):

  • [attr|=val] : Этот селектор выбирает все элементы с атрибутом attr, имеющие значение в точности равное val или начинающееся с val- (обратите внимание, что символ | - это не ошибка, он нужен для работы с языковой кодировкой.)
  • [attr^=val] : Этот селектор выбирает все элементы с атрибутом attr, значение которого начинается с val.
  • [attr$=val] : Этот селектор выбирает все элементы с атрибутом attr, значение которого заканчивается на val.
  • [attr*=val] : Этот селектор выбирает все элементы с атрибутом attr, значение которых содержит строку (в отличие от [attr~=val], этот селектор рассматривает пробелы не как разделитель значений, а как часть значения атрибута.)

Продолжим наш пример, добавив следующие CSS-правила:

/* Classic usage for language selection */
[lang|=fr] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the value "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

 

С помощью этих правил получаем:

Упражнение: оформим результаты по футболу

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

  • Первые три правила добавляют иконки флагов Великобритании, Германии и Испании слева от соответствующих пунктов списка. Вы должны включить в них подходящие селекторы атрибутов, так чтобы команды получили флаг своей страны.
  • Правила 4–6 выделяют цветом пункты списка, чтобы показать, поднялась ли команда в своей лиге (зеленый, rgba(0,255,0,0.7)), опустилась (красный, rgba(255,0,0,0.5)), или  осталась на том же месте (blue, rgba(0,0,255,0.5).)  Вставьте подходящие селекторы, чтобы назначить правильные цвета всем командам, в соответствии со строками  inc, same и dec , выступающими в качестве значений атрибута  data-perf.
  • Правила 7–8 выделяют жирным шрифтом продвинувшиеся команды, а те, которые могут выбить из соревнования - курсивом и серым цветом. Вставьте подходящие селекторы в соответствии со строками pro and rel в значениях атрибута data-perf .

В случае ошибки нажимайте кнопку Reset. Если застрянете, нажимайте кнопку Show solution, чтобы увидеть один из вариантов ответа.

Следующий этап

Теперь мы переходим к Псевдоклассам и псевдоэлементам.

Метки документа и участники

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,