Birden çok sınıfa dayalı öğe seçme

İki sınıf olduğunda bir etikete uygulamak istediğiniz bir stil kuralı var . Bunu JavaScript olmadan yapmanın bir yolu var mı? Diğer bir deyişle:

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

Benim stil kuralını uygulamak istediğiniz sadece eğer lihem vardır .leftve .ui-class-selectoruygulamalı sınıflar.

İki sınıf mı demek istiyorsun? Seçicileri "Zincirle" (aralarında boşluk yok):

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

Bu, sahip class1olduğu tüm öğeleri seçer class2.

Senin durumunda:

li.left.ui-class-selector {

}

Resmi belgeler: CSS2 sınıfı seçicileri .

Akamike , Internet Explorer 6'da bu yöntemle ilgili bir soruna işaret ettiği gibi şunu okumak isteyebilirsiniz: IE6 CSS'de çift sınıflar mı kullanıyorsunuz?

Zincir seçiciler sadece sınıflarla sınırlı değildir, hem sınıflar hem de kimlikler için yapabilirsiniz.

Sınıflar

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

Sınıf kimliği

.classA#idB {
/*style here*/
}

Yaptım

#idA#idB {
/*style here*/
}

IE 6 dışındaki tüm iyi tarayıcılar bunu destekler, listedeki son seçiciye göre seçer. Yani ".classA.classB" sadece ".classB" ye dayalı olarak seçecektir.

Davan için

li.left.ui-class-selector {
/*style here*/
}

veya

.left.ui-class-selector {
/*style here*/
}

Bu çözümleri kullanabilirsiniz:

CSS kuralları aşağıdaki iki sınıfa sahip tüm etiketler için geçerlidir:

.left.ui-class-selector {
    /*style here*/
}

CSS kuralları <li>, aşağıdaki iki sınıfa sahip tüm etiketler için geçerlidir :

li.left.ui-class-selector {
   /*style here*/
}

jQuery çözümü:

$("li.left.ui-class-selector").css("color", "red");

Javascript çözümü:

document.querySelector("li.left.ui-class-selector").style.color = "red";