it-swarm.com.ru

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

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

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

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

308
Ciel

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

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

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

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

li.left.ui-class-selector {

}

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


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

529
Felix Kling

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

Классы

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

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

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