CSS-Selektor für Elemente mit zwei Klassen

Question

Gibt es eine Möglichkeit, ein Element mit CSS basierend auf dem Wert des Klassenattributs auszuwählen, das auf zwei bestimmte Klassen festgelegt wird. Zum Beispiel, sagen wir, ich habe 3 divs:

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

Welche CSS konnte ich nur das zweite Element in der Liste auszuwählen schreiben, basierend auf der Tatsache, dass es sich um ein Mitglied der beiden foo und bar Klassen ist?

Answer 1

Kette beide Klassen-Selektoren (ohne Leerzeichen dazwischen):

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

---

Wenn Sie immer noch mit alten Browsern wie IE6 zu tun haben, bewusst sein, dass es nicht gekettet Klasse Selektoren richtig liest : Es wird nur die letzte Klassenselektor (.bar in diesem Fall) statt, unabhängig davon, welche anderen Klassen Sie auflisten.

Um darzustellen, wie andere Browser und IE6 diese interpretieren, sollten Sie diese CSS:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

Ausgabe auf 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 als dieses Element nur Klasse foo hat ausgewählt.
  2. Ausgewählt, da dieses Element beide Klassen foo und bar hat.
  3. Nicht ausgewählt da dieses Element nur Klasse bar hat.
     
     
• IE6:
  1. Nicht gewählt als dieses Element nicht Klasse hat bar.
  2. Ausgewählt, da dieses Element die Klasse bar hat, unabhängig von anderen aufgelisteten Klassen.