В CSS есть возможность стилизовать HTML-элементы, используя не только class и id, но и заданные атрибуты.
Заметка: Internet Explorer 7 (и выше) поддерживает выборку атрибутов, только если указан !DOCTYPE. В IE6 и более ранних версиях выборка атрибутов не работает.
Посмотрите на следующий пример, в котором мы стилизуем элементы с атрибутом title:
[title] { color:blue;
}
Выборка атрибута с заданным значением
В этом примере мы рассмотрим оформление всех элементов с атрибутом title=»audi»:
[title=audi] { border:5px solid green;
}
Множественный выбор по атрибуту и его значению
Этот пример покажет вам стилизацию всех элементов, содержащих атрибут title с заданным значением. Этот пример работает, даже если значение атрибута является выражением с пробелами:
[title~=hello] { color:blue;
}
Еще один пример, в котором стилизуются все элементы с атрибутом lang, имеющим заданное значение. Этот пример работает даже в том случае, если значение атрибута разделено дефисом ( — ):
[lang|=en] { color:blue;
}
Оформление форм
Выборка атрибутов очень удобна при оформлении форм ввода, если вы не хотите использовать class или ID:
input[type=»text»] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type=»button»] { width:120px; margin-left:35px; display:block;
}
Результатом данного примера будет то, что фоном текстового поля будет желтый цвет, а кнопка подтверждения формы будет менять цвет рамки на желтый.