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

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

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

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

  • [attr] : Этот селектор выбирает все элементы с атрибутом attr, вне зависимости от его значения.
  • [attr=val] : Этот селектор выбирает все элементы с атрибутом attr, имеющие значение val.
  • [attr~=val]: Этот селектор выбирает все элементы с атрибутом attr, значение которого попадает в список разделенных пробелами значений val, например является одним из классов в списке классов, разделенных пробелами.

Давайте посмотрим на пример, показанный в следующем фрагменте HTML-кода:

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>

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

/* Всем элементам с атрибутом "data-vegetable" 
   задается зеленый цвет текста */
[data-vegetable] {
  color: green
}

/* Всем элементам с атрибутом "data-vegetable",
   имеющим точное значение "liquid", задается золотой
   фоновый цвет */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* Всем элементам с атрибутом "data-vegetable",
   содержащим в своем значении "spicy", даже среди остального (содержания значения),
   задается красный цвет текста */
[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-правила:

/* Классическое применение для выбора языка */
[lang|=fr] {
  font-weight: bold;
}

/* Все элементы с атрибутом "data-quantity", 
   значение которого начинается с "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* Все элементы с атрибутом "data-quantity", 
   значение которого заканчивается на "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* Все элементы с атрибутом "data-vegetable", содержащим
   значение "not spicy", вновь станут зелеными */
[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, чтобы увидеть один из вариантов ответа.

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

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

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

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