CSS-Selektor, der auf Elemente mit zwei Klassen angewendet wird

Question

Gibt es eine Möglichkeit, ein Element mit CSS auszuwählen, das auf dem Wert des class-Attributs basiert, das auf zwei bestimmte Klassen gesetzt ist. Sagen wir zum Beispiel, 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 ein Mitglied der Klassen foo und bar ist?

Answer 1

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 zu tun haben, beachten Sie, dass er verkettete Klassenselektoren nicht korrekt liest: Er liest nur die zuletzt Klassenselektor ( .bar in diesem Fall) stattdessen, unabhängig davon, welche anderen Klassen Sie auflisten.

Um zu veranschaulichen, wie andere Browser und IE6 dies interpretieren, betrachten Sie dieses CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Die 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] -->

Die Ausgabe im 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 die Klasse foo .
  2. Ausgewählte da dieses Element beide Klassen hat foo y bar .
  3. Nicht ausgewählt da dieses Element nur die Klasse bar .

• IE6:

  1. Nicht ausgewählt da dieses Element nicht die Klasse bar .
  2. Ausgewählte da dieses Element die Klasse bar unabhängig von allen anderen aufgeführten Klassen.

Answer 2

Mit SASS:

.foo {
  /* Styles with class "foo" */
  &.bar {
    /* Styles with class "foo bar" */
  }
}

Voir https://stackoverflow.com/a/49401539/7470360