una - selector padre css

Selector de CSS que se aplica a elementos con dos clases

Question

¿Hay una 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:

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

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

Answer 1

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

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

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

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

* {
    color: black;
}

.foo.bar {
    color: red;
}

La salida en los navegadores compatibles 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] -->

La 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 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 clases.
  2. Seleccionado ya que este elemento tiene una bar clase, independientemente de cualquier otra clase listada.