CSS селектор атрибута с точным значением

Селектор атрибута с точным значением осуществляет выбор HTML-элементов на основе точного соответствия значения атрибута со значением, указанным в селекторе. В CSS-коде для обращения к селектору используются квадратные скобки. В квадратных скобках указывается имя атрибута, за которым следует знак равенства ( = ), после которого в кавычках указывается точное значение атрибута, по которому и будет осуществлён выбор соответствующих элементов.

/* Выбор всех элементов <a> со значением _blank
   у атрибута target */
a[target="_blank"] { background-color: yellow; }

Если указанная комбинация не встретится в документе, то селектор не выберет ничего.

Примечание: выбор элементов осуществляется по строгому соблюдению порядка слов и пробелов между ними. То есть для выбора конкретного элемента по значению его атрибута нужно внимательно следить за написанием значения. По сути, это можно назвать строгим сравнением строк.

Пример

a[href="00_teacher.php"] { background: yellow; }

<ul>
  <li><a href="all_properties.php">Справочник CSS</a></li>
  <li><a href="selectors.php">Селекторы</a></li>
  <li><a href="00_teacher.php">CSS самоучитель</a></li>
</ul>