Selektor CSS, który ma zastosowanie do elementów z dwiema klasami

Czy istnieje sposób wybrania elementu z CSS na podstawie wartości atrybutu class ustawionej na dwie konkretne klasy. Na przykład, powiedzmy, że mam 3 div:

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

Jaki CSS mógłbym napisać, aby wybrać TYLKO drugi element na liście, biorąc pod uwagę fakt, że jest on członkiem obu klas foo AND bar?

Połącz oba selektory klas (bez spacji między nimi):

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

Jeśli nadal masz do czynienia ze starożytnymi przeglądarkami, takimi jak IE6, pamiętaj, że nie odczytuje poprawnie łańcuchowych selektorów klas: zamiast tego odczytuje tylko selektor ostatniej klasy ( .barw tym przypadku), niezależnie od innych klas, które wymieniasz.

Aby zilustrować, jak interpretują to inne przeglądarki i IE6, rozważ ten CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Dane wyjściowe w obsługiwanych przeglądarkach to:

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

Dane wyjściowe w IE6 to:

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

Przypisy:

• Obsługiwane przeglądarki:
  1. Nie wybrano, ponieważ ten element ma tylko klasę foo.
  2. Wybrane, ponieważ ten element ma obie klasy fooi bar.
  3. Nie wybrano, ponieważ ten element ma tylko klasę bar.
     
     
• IE6:
  1. Nie wybrano, ponieważ ten element nie ma klasy bar.
  2. Wybrane, ponieważ ten element ma klasę bar, niezależnie od innych wymienionych klas.