Selettore CSS che si applica agli elementi con due classi

Esiste un modo per selezionare un elemento con CSS basato sul valore dell'attributo class impostato su due classi specifiche. Ad esempio, supponiamo che io abbia 3 div:

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

Quale CSS posso scrivere per selezionare SOLO il secondo elemento nell'elenco, in base al fatto che è un membro di entrambe le classi foo AND?

Incatena entrambi i selettori di classe (senza uno spazio in mezzo):

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

Se hai ancora a che fare con browser antichi come IE6, tieni presente che non legge correttamente i selettori di classe concatenati: leggerà invece solo l' ultimo selettore di classe ( .barin questo caso), indipendentemente dalle altre classi che elenchi.

Per illustrare come gli altri browser e IE6 interpretano questo, considera questo CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

L'output sui browser supportati è:

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

L'output su IE6 è:

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

Note:

• Browser supportati:
  1. Non selezionato in quanto questo elemento ha solo classe foo.
  2. Selezionato come questo elemento ha entrambe le classi fooe bar.
  3. Non selezionato in quanto questo elemento ha solo classe bar.
     
     
• IE6:
  1. Non selezionato in quanto questo elemento non ha classe bar.
  2. Selezionato come questo elemento ha classe bar, indipendentemente da qualsiasi altra classe elencata.