CSS селектор [атрибут]

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


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

Описание

Для выбора элемента с определенным атрибутом независимо от значения этого атрибута, применяется селектор [атрибут].

Например, можно применить стиль ко всем изображениям, имеющим атрибут alt, отмечая таким образом оформленные правильно изображения:

img[alt] { border: 1px solid blue; }

Представленный пример полезен больше для проверки кода, т.е. для выделения изображений с правильным оформлением, чем для целей стилизации элемента. Но он отлично демонстрирует принцип работы селектора [атрибут].

Также можно осуществлять выбор на основании наличия нескольких атрибутов у одного элемента. Это делается путем простого перечисления селекторов атрибутов одного за другим. Например, чтобы выделить зеленым цветом текст любой HTML гиперссылки, которая имеет атрибут href и атрибут title, можно написать так:

а[href][title] { color: green; }

При этом стиль будет применен только к ссылкам имеющим оба атрибута.

Пример:

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

  <body>
  
    <p> Ссылка с атрибутом target будет выделена желтым цветом. </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 будет выделена желтым цветом.