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

У мене є правило стилю, яке я хочу застосувати до тегу, коли він має два класи. Чи можливо це зробити без 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, ви можете прочитати це: Використовуйте подвійні класи в CSS IE6?

Вибір ланцюгів не обмежується лише класами, ви можете робити це як для класів, так і для ідентифікаторів.

Заняття

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

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

.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";