Połącz oba selektory klas (bez spacji między nimi):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
Jeśli nadal masz do czynienia ze starożytnymi przeglądarkami, takimi jak IE6, pamiętaj, że nie odczytuje poprawnie łańcuchowych selektorów klas: zamiast tego odczytuje tylko selektor ostatniej klasy ( .bar
w tym przypadku), niezależnie od innych klas, które wymieniasz.
Aby zilustrować, jak interpretują to inne przeglądarki i IE6, rozważ ten CSS:
* {
color: black;
}
.foo.bar {
color: red;
}
Dane wyjściowe w obsługiwanych przeglądarkach to:
<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] -->
Dane wyjściowe w IE6 to:
<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] -->
Przypisy:
- Obsługiwane przeglądarki:
- Nie wybrano, ponieważ ten element ma tylko klasę
foo
.
- Wybrane, ponieważ ten element ma obie klasy
foo
i bar
.
- Nie wybrano, ponieważ ten element ma tylko klasę
bar
.
- IE6:
- Nie wybrano, ponieważ ten element nie ma klasy
bar
.
- Wybrane, ponieważ ten element ma klasę
bar
, niezależnie od innych wymienionych klas.