CSS-Auswahl, die für Elemente mit zwei Klassen gilt

Gibt es eine Möglichkeit, ein Element mit CSS basierend auf dem Wert des Klassenattributs auszuwählen, das auf zwei bestimmte Klassen festgelegt wird? Nehmen wir zum Beispiel an, ich habe 3 Divs:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Welches CSS könnte ich schreiben, um NUR das zweite Element in der Liste auszuwählen, basierend auf der Tatsache, dass es Mitglied der Klassen foo UND bar ist?

Verketten Sie beide Klassenselektoren (ohne Leerzeichen dazwischen):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

Wenn Sie immer noch mit alten Browsern wie IE6 arbeiten müssen, beachten Sie, dass verkettete Klassenselektoren nicht korrekt gelesen werden: Stattdessen wird nur der letzte Klassenselektor ( .barin diesem Fall) gelesen , unabhängig davon, welche anderen Klassen Sie auflisten.

Betrachten Sie dieses CSS, um zu veranschaulichen, wie andere Browser und IE6 dies interpretieren:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Die Ausgabe in unterstützten Browsern ist:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

Ausgabe auf IE6 ist:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Fußnoten:

• Unterstützte Browser:
  1. Nicht ausgewählt, da dieses Element nur eine Klasse hat foo.
  2. Ausgewählte als dieses Element hat beiden Klassen foound bar.
  3. Nicht ausgewählt, da dieses Element nur eine Klasse hat bar.
     
     
• IE6:
  1. Nicht ausgewählt, da dieses Element keine Klasse hat bar.
  2. Ausgewählt, da dieses Element eine Klasse hat bar, unabhängig von anderen aufgelisteten Klassen.