Специальные селекторы: Селекторы по атрибутам тега.

  Cелекторы по атрибутам тега - позволяют определить элементы тегов по наличию у них определенного атрибута, значения определенного атрибута, определенного контента в значении определенного атрибута.

Формат записи в коде CSS селектора по атрибутам тега:

  • Основной селектор [Условие по атрибуту ]

Значения формата записи:

  Основной селектор - Устанавливает элементы тегов, к которым применяется условие по атрибуту для определения конечных элементов тегов.

Значения:

  [ - Открывающая квадратная скобка.
  Наличие квадратных скобок обязательно в формате записи селектора по атрибутам тега.
  Условие по атрибуту - Устанавливает условие для определения конечных элементов тегов из элементов тегов определенными основным селектором.

Значения:

  • Имя атрибута - Имя атрибута тега, наличие которого является условием определения его элемента.
  • Имя атрибута=Значение атрибута - Имя и значение атрибута тега, наличие которых является условием определения его элемента.
  • Имя атрибута~=список значений атрибута, разделенных пробелами - Перечень значений заданного атрибута тега.
      Наличие хотя бы одного из них является условием определения элемента этого тега.
  • Имя атрибута^=подстрока - Имя и часть кода значения атрибута тега, с которого оно должно начинаться, для выполнения условия определения элемента этого тега.
  • Имя атрибута тега$=подстрока - Имя и часть кода значения атрибута тега, которым оно должно оканчиваться, для выполнения условия определения элемента этого тега.
  • Имя атрибута*=подстрока - Имя и часть кода значения атрибута тега, который должен быть его частью, для выполнения условия определения элемента этого тега.
  ] - Закрывающая квадратная скобка.
  Наличие квадратных скобок обязательно в формате записи селектора по атрибутам тега.

В примерах основным селектором является элемент тега A:
Пример селектора по атрибутам тега [HREF] - наведите мышку.
Элемент тега A с атрибутом - HREF="https://www.google.com"
Элемент тега A с атрибутом - HREF="http://www.yandex.ru"
Элемент тега A с атрибутом - HREF="http://www.mail.ru"
Пример селектора по атрибутам тега [HREF$=com] - наведите мышку.
Элемент тега A с атрибутом - HREF="https://www.google.com"
Элемент тега A с атрибутом - HREF="http://www.yandex.ru"
Элемент тега A с атрибутом - HREF="http://www.mail.ru"
Пример селектора по атрибутам тега [HREF*=ru] - наведите мышку.
Элемент тега A с атрибутом - HREF="https://www.google.com"
Элемент тега A с атрибутом - HREF="http://www.yandex.ru"
Элемент тега A с атрибутом - HREF="http://www.mail.ru"