Wybierz element na podstawie wielu klas

Mam regułę stylu, którą chcę zastosować do tagu, gdy ma on dwie klasy. Czy jest jakiś sposób na wykonanie tego bez JavaScript? Innymi słowy:

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

Chcę zastosować moją regułę stylu tylko wtedy, gdy lizastosowano obie klasy .lefti .ui-class-selectorklasy.

Masz na myśli dwie klasy? „Połącz” selektory (bez spacji między nimi):

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

To wybiera wszystkie elementy, class1które również mają class2.

W Twoim przypadku:

li.left.ui-class-selector {

}

Oficjalna dokumentacja: Selektory klas CSS2 .

Jak akamike wskazuje na problem z tą metodą w Internet Explorerze 6, możesz przeczytać to: Używać podwójnych klas w CSS IE6?

Selektory łańcucha nie ograniczają się tylko do klas, możesz to zrobić zarówno dla klas, jak i identyfikatorów.

Klasy

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

Identyfikator klasy

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

Zrobiłem

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

Wszystkie dobre obecne przeglądarki obsługują to, z wyjątkiem IE 6, wybiera na podstawie ostatniego selektora na liście. Zatem „.classA.classB” wybierze na podstawie po prostu „.classB”.

Do twojej sprawy

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

lub

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

Możesz użyć tych rozwiązań:

Reguły CSS mają zastosowanie do wszystkich tagów, które mają następujące dwie klasy:

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

Reguły CSS mają zastosowanie do wszystkich tagów, które mają <li>następujące dwie klasy:

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

Rozwiązanie jQuery:

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

Rozwiązanie Javascript:

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