Selektor CSS, który ma zastosowanie do elementów z dwiema klasami

472

Czy istnieje sposób wybrania elementu z CSS na podstawie wartości atrybutu class ustawionej na dwie konkretne klasy. Na przykład, powiedzmy, że mam 3 div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Jaki CSS mógłbym napisać, aby wybrać TYLKO drugi element na liście, biorąc pod uwagę fakt, że jest on członkiem obu klas foo AND bar?

Adam
źródło

Odpowiedzi:

735

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 ( .barw 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:
    1. Nie wybrano, ponieważ ten element ma tylko klasę foo.
    2. Wybrane, ponieważ ten element ma obie klasy fooi bar.
    3. Nie wybrano, ponieważ ten element ma tylko klasę bar.

  • IE6:
    1. Nie wybrano, ponieważ ten element nie ma klasy bar.
    2. Wybrane, ponieważ ten element ma klasę bar, niezależnie od innych wymienionych klas.
BoltClock
źródło
3
Czy ma znaczenie kolejność, w jakiej je umieściłem?
Adam
3
To nie ma znaczenia (Będzie dla IE6 z powodu tego, jak to interpretuje, zakładając, że musisz go obsługiwać.)
BoltClock
6
Czy to ważne, że między nimi nie ma miejsca?
CodyBugstein
26
@Imray: Tak, spacja reprezentuje selektor potomny, co sprawiłoby, że każdy selektor klasy reprezentowałby inny element. Ale mówimy tutaj o jednym elemencie.
BoltClock
2
@David Brossard: Tak, to prawda.
BoltClock