CSS позволяет создавать правила, сопоставляемые элементам с атрибутами, определенными в исходном коде HTML-документа. Селекторы атрибутов могут сопоставляться в следующих четырех случаях.

• [att] – если для элемента установлен атрибут att независимо от значения этого атрибута.

• [att=val] – когда значение атрибута att данного элемента в точности равно val.

• [att~=val] – если значением атрибута att данного элемента является список слов, разделенных пробелами, одно из которых в точности равно val.

• [att|=val] – когда значением атрибута att элемента является начинающийся со слова val список разделенных дефисом слов. Сопоставление всегда начинается с начала значения атрибута.

Чтобы хорошо разобраться с данным свойством, рассмотрите ряд примеров и подробных комментариев к ним.

Итак, следующее правило CSS сопоставляется всем элементам P, для которых описан атрибут align, независимо от его значения:

p[align] { color: blue; }

В следующем примере селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class в точности равно example:

span[class=example] { color: blue; }

Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В следующем примере селектор сопоставляется всем элементам TABLE, у которых значение атрибута width в точности равно 90 %, а значение атрибута height в точности равно 50 %:

table[width="90%"][height="50%"] { color: blue; }

Следующие селекторы иллюстрируют различия между знаками = и ~=. Первый селектор будет сопоставляться, например, значению copyright copyleft copyall атрибута rel. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно http://www.yoursite.com/:

a[rel~="copyright"]

a[href="#"]

Следующее правило скрывает все элементы, атрибут lang которых имеет значение fr, то есть элементы с текстом на французском языке:

*[lang=fr] { display : none }

Следующее правило будет сопоставляться тем значениям атрибута lang, которые начинаются с ru, включая ru, ru-RU и ru-UA:

*[lang|="ru"] { color : red }

В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (.).

Например, для всех элементов с class~=test информацию о стиле можно определить следующим образом:

*.test { color: red } /* все элементы с class~=test */

или просто

.test { color: red } /* все элементы с class~=test */

Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1с class~=test:

h1.test { color: green } /* элемент H1 с class~=test */

Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором – будет:

<h1>Не зеленый цвет</h1>

<h1 class="test">Настоящий зеленый цвет</h1>

Для сопоставления подмножеству значений атрибута class перед каждым из них, записанных в произвольном порядке, следует поставить точку (.).

Например, следующее правило сопоставляется любому элементу P, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:

p.test.marine { color: green }

Это правило сопоставляется, если, например, для элемента P задано class = «Test blue aqua marine», и не сопоставляется, если задано class = «test blue».

Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за которым следует значение атрибута ID.