Elementos de orientación con múltiples clases usando CSS Selectors

cuando trabaja con HTML y CSS puede encontrar situaciones donde necesita seleccionar elementos basados ​​en elementos basados ​​en elementos sobre los valores de clases específicas. Un requisito común es seleccionar elementos con múltiples clases asignadas a ellos.

pregunta:

dio tres divs con las siguientes clases:

Hello Foo
Hello World
Hello Bar

¿Cómo puede escribir CSS para seleccionar solo el segundo elemento (con las clases "Foo Bar") usando selectores CSS?

Respuesta:

Para seleccionar elementos con múltiples clases, simplemente encadene a los selectores de clase sin ningún espacio intermedio. En este ejemplo, el código CSS sería:

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

Este selector aplicará estilos al segundo div, ya que es el único elemento que tiene las clases "foo" y "bar" asignadas a él.

nota adicional :

Los navegadores más antiguos como Internet Explorer 6 pueden no interpretar correctamente los selectores de clase encadenados. IE6 solo leerá el último selector de clase e ignorará a los demás. Para garantizar la compatibilidad con IE6, debe evitar usar selectores de clase encadenados y, en su lugar, usar selectores más específicos, como:

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