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

Question

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

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

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

Answer 1

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

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

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

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

li.left.ui-class-selector {

}

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

---

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

Answer 2

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

Классы

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

Класс & Id

.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*/
}

Answer 3

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

Правила 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";