Селекторы атрибутов

Селекторы атрибутов используют атрибуты тега. В основном они используются в XML, но также применяются и в XHTML. Правило:

img [title] {border: 2px solid blue;}

указывает, что любой тег img с атрибутом title, например:

<img src="images/sunset.jpg" alt="Lahina Sunset" title="Lahina Sunset">

должен отображаться с синей рамкой и толщиной 2 пиксела вне зависимости от содержания атрибута title.

Атрибут title содержит текст, который отображается во всплывающей подсказке при наведении указателя мыши на изображение. Обычно текст title дублируется в атрибуте alt, содержащем описание изображения, отображаемое, если само изображение загрузить не удалось. Значение атрибута alt также озвучивается программами считывания информации с экрана.

Можно задать стили только для тегов с определенными значениями атрибутов. Например, правило:

img [alt="Stylin logo"] {border: 2px solid-blue;}

добавляет рамку вокруг изображения, значением атрибута alt которого является текст "Stylin logo", иными словами, если в коде есть запись вроде следующей:

<img src="images/stylin_logo" alt="Stylin logo">

Это правило становится еще более полезным, если знать, что в качестве значения атрибута можно указать только первые буквы текста. Но в этом случае прием сработает, если «общая» часть текста значения атрибута будет отделена от «отличающихся». Иными словами, при наличии кода:

<img src="images/car1.gif" alt="car-toyota-prius"> <img src="images/car2.gif" alt="car-handa-accord">

использовав символ | в правиле CSS:

img [alt | ="car"] {border: 2px solid blue;}

мы добавим к этим двум изображениям синюю рамку толщиной в 2 пиксела. Кстати, при этом рамка будет добавлена и к следующему изображению:

<img src="images/car_montage.gif" alt="car">

несмотря на то, что в данном примере значение тега alt не имеет дополнительного расширения.




Rambler's Top100