Wählen Sie ein Element basierend auf mehreren Klassen aus

Ich habe eine Stilregel, die ich auf ein Tag anwenden möchte, wenn es zwei Klassen hat. Gibt es eine Möglichkeit, dies ohne JavaScript durchzuführen? Mit anderen Worten:

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

Ich möchte meine Stilregel nur anwenden, wenn lisowohl beide .leftals auch .ui-class-selectorKlassen angewendet wurden.

Du meinst zwei Klassen? "Verketten" Sie die Selektoren (keine Leerzeichen zwischen ihnen):

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

Dies wählt alle Elemente aus class1, die auch haben class2.

In Ihrem Fall:

li.left.ui-class-selector {

}

Offizielle Dokumentation: CSS2-Klassenselektoren .

Wie akamike auf ein Problem mit dieser Methode in Internet Explorer 6 hinweist, möchten Sie möglicherweise Folgendes lesen: Verwenden Sie Doppelklassen in IE6-CSS?

Kettenselektoren sind nicht nur auf Klassen beschränkt, sondern können sowohl für Klassen als auch für IDs ausgeführt werden.

Klassen

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

Klasse & Id

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

Ich tat

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

Alle guten aktuellen Browser unterstützen dies mit Ausnahme von IE 6, das basierend auf dem letzten Selektor in der Liste ausgewählt wird. ".ClassA.classB" wird also nur basierend auf ".classB" ausgewählt.

Für Ihren Fall

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

oder

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

Sie können diese Lösungen verwenden:

CSS-Regeln gelten für alle Tags mit den folgenden zwei Klassen:

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

CSS-Regeln gelten für alle Tags <li>mit den folgenden zwei Klassen:

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

jQuery-Lösung:

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

Javascript-Lösung:

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