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

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

Я сделал

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