CSS селектор [атрибут=значение]

Поддержка браузерами


12.0+	7.0+	2.0+	4.0+	9.6+	3.1+

Описание

Селектор [атрибут=значение] применяет заданный стиль к элементу с указанным атрибутом и значением. Например, если мы хотим выделить жирным шрифтом ссылку, указывающую на определенный документ веб-сервера, то это можно записать так:

a[href="httр://www.puzzleweb.ru/css/selectors.php"] { font-weight: bold; }

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

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

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      a[target=_blank] { background-color: yellow; }
    </style>
  </head>

  <body>
    <p>Ссылка с target="_blank" будет выделена желтым цветом.</p>
    <p>
      <a href="httр://www.puzzleweb.ru" target="_blank">www.puzzleweb.ru</a><br>
      <a href="httр://puzzleweb.ru">puzzleweb.ru</a>
    </p>

  </body>
</html>

Результат данного примера:

Ссылка с target="_blank" будет выделена желтым цветом.