Selector de CSS que se aplica a elementos con dos clases


472

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

<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 miembro de las clases foo AND bar?

Respuestas:


735

Encadene ambos selectores de clase (sin un espacio intermedio):

.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 ( .baren este caso), independientemente de las otras clases que enumere.

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 fooy 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.

3
¿Importa el orden en que los puse?
Adam

3
No importa. (Lo hará para IE6 debido a cómo lo interpreta, suponiendo que debe
admitirlo

66
¿Importa que no haya espacio entre ellos?
CodyBugstein

26
@ Imray: Sí, el espacio representa un selector descendente, lo que haría que cada selector de clase represente un elemento diferente. Pero estamos hablando de un solo elemento aquí.
BoltClock

2
@David Brossard: Sí, lo hace.
BoltClock
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.