В предыдущем разделе мы рассматривали значения атрибута class, состоящие из одного слова. В HTML значением class может быть и разделенный пробелами список слов. Например, если вы хотите обозначить конкретный элемент и как важное сообщение, и как предупреждение, можно было бы написать:
<p class="urgent warning">При работе с плутонием необходимо предпринять меры по недопущению достижения критической массы.</p>
<p>При работе с плутонием <span class="warning">существует реальная
возможность взрыва, которую надо избежать любой ценой</span>.
Это может быть достигнуто путем разделения масс.</p>
Порядок слов на самом деле не имеет значения; подошло бы и warning urgent. Теперь, скажем, вы хотите, чтобы все элементы, атрибут class которых имеет значение warning, были выделены полужирным шрифтом, те элементы, атрибут class которых имеет значение urgent, были выделены курсивом, а элементы, имеющие оба значения, получили серебряный фон. Это могло бы быть написано следующим образом:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}
Объединяя два селектора класса, можно выбрать только те элементы, которые имеют оба имени класса, стоящие в любом порядке. Как видите, исходный код HTML содержит сlass="urgent warning", но CSS-селектор записан так: .warning.urgent. Несмотря на это, согласно правилу абзац «При работе с плутонием…» будет расположен на серебряном фоне. Если множественный селектор класса содержит имя, не входящее в разделенный пробелами список, то сопоставления не произойдет. Рассмотрим следующее правило:
p.warning.help {background: red;}
Как и можно было ожидать, селектор будет выбирать только те элементы p, атрибут class которых содержит слова warning и help. Следовательно, он не будет работать с элементами p, в атрибут class которых входят только слова warning или urgent. Однако он выберет такой элемент:
<p class="urgent warning help">Помогите!</p>
Internet Explorer до версии IE7 для обеих платформ не всегда правильно обрабатывает множественные селекторы классов. В более старых версиях вполне возможно выбирать из списка одно имя класса, но выбор на основании нескольких имен выполняется неправильно. Таким образом, p.warning работает, как и ожидается, а вот p.warning.help выбирает только те элементы p, в атрибуте class которых имеется слово help, потому что оно идет последним в селекторе. Если бы вы написали p.help.warning, в более старой версии Internet Explorer выбирались бы все элементы p с атрибутом class, имеющим значение warning, незвисимо от присутствия help в этом значении.