Селекторы атрибутов
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="http://www.yoursite.com/"]
Следующее правило скрывает все элементы, атрибут 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 не будет отобр
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="http://www.yoursite.com/"]
Следующее правило скрывает все элементы, атрибут 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 не будет отобр
