Множественные классы

В предыдущем разделе мы рассматривали значения атрибута class, состоящие из одного слова. В HTML значением class может быть и разделенный пробелами список слов. Например, если вы хотите обозначить конкретный элемент и как важное сообщение, и как предупреждение, можно было бы написать:

При работе с плутонием необходимо предпринять меры по недопущению достижения критической массы.


При работе с плутонием существует реальная
возможность взрыва, которую надо избежать любой ценой
.
Это может быть достигнуто путем разделения масс.



Порядок слов на самом деле не имеет значения; подошло бы и 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. Однако он выберет такой элемент:

Помогите!



Internet Explorer до версии IE7 для обеих платформ не всегда правильно обрабатывает множественные селекторы классов. В более старых версиях вполне возможно выбирать из списка одно имя класса, но выбор на основании нескольких имен выполняется неправильно. Таким образом, p.warning работает, как и ожидается, а вот p.warning.help выбирает только те элементы p, в атрибуте class которых имеется слово help, потому что оно идет последним в селекторе. Если бы вы написали p.help.warning, в более старой версии Internet Explorer выбирались бы все элементы p с атрибутом class, имеющим значение warning, незвисимо от присутствия help в этом значении.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы