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


360

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

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

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


css-tricks.com/multiple-class-id-selectors - см. Селектор двойного класса
первый посткомментатор

Ответы:


595

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

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

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

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

li.left.ui-class-selector {

}

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


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


6
Обратите внимание, что IE6 не нравится это, так как он не читает цепочку классов. Это будет только смотреть на последний класс в цепочке.
Акамике

16
это не так :) Все основные веб-сайты упали, удаляются или планируют в ближайшем будущем отказаться от поддержки IE6. Сделайте то же самое!
Томас Бонини

@ Андреас Бонини: Да, я знаю. Если честно, меня уже давно не волнует IE6. (Я удалил свой предыдущий комментарий, потому что нашел другой вопрос, который касается этой проблемы.)
Феликс Клинг

Да, вы не можете использовать их вообще в IE6, только используйте более длинные маршруты для стилизации ваших элементов. Например, стилизация каждого класса в отдельности и использование соответствующей специфики CSS, чтобы переопределить как можно лучше.
Акамике

2
Я с любовью помню танцы на могиле IE6. У меня даже не было поддержки IE10 в этом году, и вообще отказ от IE уже на горизонте. Я люблю будущее. ☺
Майкл Шепер

22

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

Классы

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

9
Id & Id - концептуально странный селектор.
Феликс Ганьон-Гренье

0

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

Правила 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";
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.