Ссылка по любому атрибуту

Описанных способов обращения к элементам HTML-документа достаточно для обработки большинства ситуаций, однако иногда возникает необходимость найти определенный элемент и поменять стиль только для него. В последних версиях CSS появились новые способы определения ссылок на элементы HTML. Один из них подразумевает использование селектора атрибутов. Теперь сослаться на документ можно не только по id или class, но и по любому другому его атрибуту.

Листинг 2.11. Определение ссылки только на элементы <p> и только имеющие атрибут name

P[name] { font-size: 20px }

Правило из листинга 2.11 меняет стиль только элементов <p> и только имеющих атрибут name. Для имитации описанных ранее решений, включающих в себя атрибуты id и class, нужно добавить значение атрибута (листинг 2.12).

Листинг 2.12. Определение ссылки на элементы <p>, имеющие атрибут name со значением mytext

P[name="mytext"] { font-size: 20px }

CSS3 позволяет комбинировать символ равенства (=) с другими, определяя еще более детальные правила выбора (листинг 2.13).

Листинг 2.13. Новые селекторы в CSS3

P[nameA="my"] { font-size: 20px } p[name$="my"] { font-size: 20px } p[name*="my"] { font-size: 20px }

Если вы уже знакомы с концепцией регулярных выражений (например, после изучения других языков, таких как JavaScript и PHP), то узнаете селекторы, использованные в листинге 2.13. В CSS3 эти селекторы дают следующие результаты:

О правило с селектором А= применяется ко всем элементам <p>, имеющим атрибут name, значение которого начинается с my (например, mytext, mycar);

О правило с селектором $= применяется ко всем элементам <p>, имеющим атрибут name, значение которого заканчивается на my (например, textmy, carmy);

О правило с селектором *= применяется ко всем элементам <p>, имеющим атрибут name, значение которого содержит подстроку my (в данном случае подстрока может находиться в середине значения, например, textmycar).

В этих примерах мы использовали элемент <p>, атрибут name и случайный текст «my», однако этот же прием можно применять с любыми подходящими для вашей задачи атрибутами и значениями. Просто запишите в квадратных скобках название атрибута и желаемое значение —так вы сможете определить ссылку на любой элемент HTML.