Выбрать элемент на основе нескольких классов

У меня есть правило стиля, которое я хочу применить к тегу, когда он имеет два стиля. Есть ли способ выполнить это без JavaScript? Другими словами:

<li class='left ui-class-selector'>

Я хочу применить правило стиля только в том случае, если li имеет классы .left и .ui-class-selector.

Ответ 1

Вы имеете в виду два класса? "Цепочка" селекторов (между ними нет пробелов):

.class1.class2 {
    /* style here */
}

Это выбирает все элементы с class1, которые также имеют class2.

В вашем случае:

li.left.ui-class-selector {

}

Официальная документация: Селектора классов CSS2.

Как указывает акамеи, проблема с этим методом в Internet Explorer 6 может выглядеть следующим образом: Использовать двойные классы в CSS IE6?

Ответ 2

Селекторы цепей не ограничены только классами, вы можете сделать это для обоих классов и идентификаторов.

Классы

.classA.classB {
/*style here*/
}

Класс и идентификатор

.classA#idB {
/*style here*/
}

Id и Id

#idA#idB {
/*style here*/
}

Все хорошие текущие браузеры поддерживают это, кроме IE 6, он выбирает на основе последнего селектора в списке. Таким образом, ".classA.classB" будет выбирать на основе только ".classB".

Для вашего случая

li.left.ui-class-selector {
/*style here*/
}

или

.left.ui-class-selector {
/*style here*/
}