Selector CSS que se aplica a elementos con dos clases

¿Hay alguna manera de seleccionar un elemento con CSS basado en el valor del atributo de clase que se establece en dos clases específicas? Por ejemplo, digamos que tengo 3 divs:

Hello Foo
Hello World
Hello Bar

¿Qué CSS podría escribir para seleccionar SOLAMENTE el segundo elemento de la lista, basado en el hecho de que es miembro de las clases de barra foo AND?

Encadena ambos selectores de clase (sin espacio entre ellos):

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

Si todavía tiene que lidiar con navegadores antiguos como IE6, tenga en cuenta que no lee los selectores de clase encadenados correctamente: en su lugar, solo leerá el último selector de clase ( .bar en este caso), independientemente de las otras clases que enumere. .

Para ilustrar cómo otros navegadores e IE6 lo interpretan, considere este CSS:

 * { color: black; } .foo.bar { color: red; } 

La salida en navegadores compatibles es:

 
Hello Foo
Hello World
Hello Bar

La salida en IE6 es:

 
Hello Foo
Hello World
Hello Bar

Notas al pie:

  • Navegadores compatibles:
    1. No seleccionado ya que este elemento solo tiene clase foo .
    2. Seleccionado como este elemento tiene ambas clases foo y bar .
    3. No seleccionado ya que este elemento solo tiene bar clase.
  • IE6:
    1. No seleccionado ya que este elemento no tiene bar clase.
    2. Seleccionado como este elemento tiene bar clase, independientemente de cualquier otra clase en la lista.