Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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 будет выделена желтым цветом.

www.puzzleweb.ru
puzzleweb.ru

    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь