Page 155 - Сила CSS3 Освой новейший стандарт

Что такое селекторы атрибутов? • 155

ЧтО такОе селектОры атрибутОв?

Для стилизации ссылок и изображений в зависимости от типа мы будем исполь-
зовать селекторы атрибутов. Мощь селекторов атрибутов заключается в том, что
они позволяют обращаться к определенным элементам, не используя идентифика-
торы или классы HTML. Для того чтобы обратиться к элементу, нужно всего лишь
знать, есть ли у него определенный атрибут, а также возможно ли обращение по
значению этого атрибута.
К примеру, селектор img[alt] составлен из се-
лектора типа img, за которым следует селектор Необязательно использовать
атрибута [alt]. Квадратные скобки используют- селекторы атрибутов только в
ся для обозначения всех селекторов атрибутов, сочетании с селекторами ти-
но содержимое квадратных скобок зависит от пов — допустимы любые типы
того, к какому элементу вы желаете обратить- простых селекторов. Например,
ся. Селектор img[alt] позволяет выбрать все .warning[title] объединяет селек-
тор класса с селектором атрибу-
элементы img, у которых есть атрибут alt. Его та. Можно также использовать
удобно применять во время тестирования стра- селектор атрибута отдельно, сам
ниц: добавьте ко всем изображениям, имеющим по себе; например, селектор [title]
атрибут alt, ярко-зеленую рамку, и вы сразу же позволяет выбрать все элементы,
увидите изображения без рамок, требующие имеющие атрибут title.
добавления атрибута alt.
img[alt] {
border: 3px solid #0C0;
}
<img src="photos/poe.jpg" width="320" height="241"
¬ alt="My cat Poe">
<img src="photos/dog.jpg" width="320" height="240">

Рис. 4.2. У элемента img, представляющего фотографию кошки, есть атрибут alt,
поэтому мы видим зеленую рамку. У фотографии собаки атрибута alt нет

www.trk.kg