О спецификации CSS2 том 2

Селекторы класса



5.8.3 Селекторы класса

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

Пример(ы):

Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:

*.pastoral { color: green } /* все элементы с class~=pastoral */ или просто .pastoral { color: green } /* все элементы с class~=pastoral */

Следующее - назначает стиль только элементам H1 с class~="pastoral":

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

При назначении эти правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".

Пример(ы):

Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":

P.pastoral.marine { color: green }

Правило совпадает, если class="pastoral blue aqua marine", но не совпадает class="pastoral blue".

Примечание. CSS даёт такую мощь атрибуту "class", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначать стилевую информацию через атрибут "class". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.



Содержание раздела