Selector CSS que se aplica a elementos con dos clases.

¿Hay alguna manera de seleccionar un elemento con CSS en función del valor del atributo de clase establecido 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 SÓLO el segundo elemento de la lista, basándose en el hecho de que es miembro de las clases foo Y bar?

Sep 23 '10 01:09 Adam

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 Internet Explorer 6, tenga en cuenta que no lee correctamente los selectores de clases encadenados: solo leerá el último selector de clases ( .baren este caso), independientemente de qué otras clases enumere. .

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

* {
  color: black;
}

.foo.bar {
  color: red;
}

<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

Expandir fragmento

La página se verá así:

En navegadores compatibles:
1. No seleccionado porque este elemento solo tiene clase foo.
2. Seleccionado ya que este elemento tiene ambas clases fooy bar.
3. No seleccionado porque este elemento solo tiene clase bar.
En Internet Explorer 6:
1. No seleccionado porque este elemento no tiene clase bar.
2. Seleccionado porque este elemento tiene clase bar, independientemente de cualquier otra clase enumerada.
3. Seleccionado porque este elemento tiene clase bar.

Sep 22 '2010 18:09 BoltClock

Con SASS:

.foo {
  /* Styles with class "foo" */

  &.bar {
    /* Styles with class "foo bar" */
  }
}

Consulte ¿Cuál es el significado de un signo comercial en menos selectores?

Dec 21 '2021 17:12 A Jar of Clay

Se puede hacer de dos maneras en SCSS.

Opción 1

.foo.bar {
    // Styles with class "foo bar"
}

opcion 2

.foo {
   &.bar {
        // Styles with class "foo bar"
    }
 }

Jun 23 '2023 11:06 AzizStark