Wählen Sie ein Element basierend auf mehreren Klassen aus

360

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.

Ciel
quelle
css-tricks.com/multiple-class-id-selectors - siehe Double Class Selector
firstpostcommenter

Antworten:

595

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?

Felix Kling
quelle
6
Bitte beachten Sie, dass IE6 diese nicht mag, da es die Klassenkette nicht liest. Es wird nur die letzte Klasse in der Kette betrachtet.
Akamike
16
es ist nicht :) Alle wichtigen Websites wurden gelöscht, werden gelöscht oder planen, in naher Zukunft die Unterstützung für IE6 einzustellen. Machen Sie dasselbe!
Thomas Bonini
@ Andreas Bonini: Ja ich weiß. Um ehrlich zu sein, interessiert mich IE6 schon lange nicht mehr. (Ich habe meinen vorherigen Kommentar gelöscht, weil ich die andere Frage gefunden habe, die sich mit diesem Problem befasst.)
Felix Kling
Ja, Sie können sie in IE6 überhaupt nicht verwenden. Nehmen Sie nur längere Wege, um Ihre Elemente zu gestalten. Beispiel: Gestalten Sie jede Klasse separat und verwenden Sie die entsprechende CSS-Spezifität, um sie so gut wie möglich zu überschreiben.
Akamike
2
Ich erinnere mich gern daran, wie ich auf dem Grab von IE6 getanzt habe. Ich musste dieses Jahr noch nicht einmal IE10 unterstützen, und es ist in Sicht, den IE insgesamt fallen zu lassen. Ich liebe die Zukunft. ☺
Michael Scheper
22

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*/
}
nidhi0806
quelle
9
Id & Id ist ein konzeptionell seltsamer Selektor.
Félix Gagnon-Grenier
0

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";
Bahman Parsamanesh
quelle