Селекторы класса
В таблицах стилей, используемых в 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". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.
