Медная поляна 

Сегодня о классах. Точнее о возможности присваивать любому элементу в (X)HTML-документе нескольких классов, и вытекающей из этого гибкости в управлении.

Классам вообще присуща достаточная универсальность. Один и тот же класс может быть присвоен разным элементам и, кроме этого, одному элементу можно присвоить несколько классов, благо, спецификация CSS 2.1 об этом явно указывает. Маленькая ремарка — следует помнить о том, что название класса не может начинаться с цифры или дефиса. Теперь пример:

<p class="one two three">А что это за шаги такие на лестнице? - А это нас арестовывать идут. </p>

Даже невооруженным глазом видно, что у параграфа 3 класса, отделенных друг от друга пробелами. Как таким элементом можно манипулировать?

Обратиться к такому многоклассовому параграфу можно называя один из классов

p.one {
	color:red;
}

два

p.one.three {
	color:blue;
}

или все

p.one.two.three {
	color:black;
}

Если все эти правила будут упомянуты в таблице стилей в точно таком же порядке, то цвет текста в абзаце станет черным, поскольку: 1) действует принцип "работает последний", и, что более важно 2) у правила с одновременным обращением к элементу с помощью нескольких классов «сила воздействия» (специфичность, говоря официальным языком) выше одиночных. Все последние версии браузеров легко справляются с такой конструкцией.

Ради любопытства остается понять, как ведет себя ослик под номером 6. А IE6, обрабатывая многочлен к одному элементу будет ориентироваться только на последний класс-селектор в цепочке. Поэтому, встретив запись

p.one.three {
	color:blue;
}

браузер от Microsoft раскрасит синим текст только в тех параграфах, в названии классов которых есть слово three (идет последним в цепи правила); наличие класса one не будет иметь значения.

Надеюсь, не сильно вас загрузил. Ответ на вопрос о том, как и где применять множественные классы оставляю на ваше усмотрение.

P.s. Больше информации по весу/специфичности селекторов можно почерпнуть в данной заметке.