Selector de CSS que se aplica a elementos con dos clases

Question

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

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

Lo CSS podría escribir para seleccionar sólo el segundo elemento de la lista, basada en el hecho de que es un miembro de las dos clases foo y bar?

Answer 1

Cadena 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 ha leído los selectores de clase encadenados correctamente : solo leerá el último selector de clase (.bar en este caso), independientemente de las otras clases que enumere.

para ilustrar cómo otros navegadores y IE6 interpretar esto, consideran que este CSS:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

de salida en los navegadores soportados es:

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

de salida en IE6 es:

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

Notas al pie:

• navegadores soportados:
  1. No seleccionado que este elemento sólo se tiene clase foo.
  2. Seleccionado ya que este elemento tiene ambas clases foo y bar.
  3. No se seleccionó ya que este elemento solo tiene la clase bar.
     
     
• IE6:
  1. No seleccionado que este elemento no tiene clase bar.
  2. Seleccionado ya que este elemento tiene la clase bar, independientemente de cualquier otra clase enumerada.