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

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

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

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

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

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

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

В твоем случае:

li.left.ui-class-selector {

}

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

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

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

Классы

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

ID класса

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

Я сделал

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

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

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

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

или

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

Вы можете использовать эти решения:

Правила CSS применяются ко всем тегам, которые имеют следующие два класса:

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

Правила CSS применяются ко всем тегам, имеющим <li>следующие два класса:

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

Решение jQuery:

$("li.left.ui-class-selector").css("color", "red");

Решение Javascript:

document.querySelector("li.left.ui-class-selector").style.color = "red";