Selector CSS que se aplica a elementos con dos clases

Question

Selector CSS que se aplica a elementos con dos clases

Hay una manera de seleccionar un elemento con CSS basado en el valor del atributo class 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 SOLO el segundo elemento de la lista, basado en el hecho de que es un miembro de las clases foo Y bar?

370

css css-selectors

Author: BoltClock, 2010-09-22

Source

1 answers

score 570 · Accepted Answer

Encadene ambos selectores de clase (sin un 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 correctamente los selectores de clase encadenados: solo leerá el último selector de clase (.bar en este caso) en su lugar, independientemente de qué otras clases enumere.

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

* {
    color: black;
}

.foo.bar {
    color: red;
}

Salida en navegadores compatibles is:

<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 clase bar.
IE6:
1. No seleccionado ya que este elemento no tiene clase bar.
2. Seleccionado como este elemento tiene clase bar, independientemente de cualquier otra clase listada.