Selektor CSS, który stosuje się do elementów z dwiema klasami:

Question

Czy istnieje sposób na wybór elementu za pomocą CSS na podstawie wartości atrybutu klasy ustawionego na dwie określone 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> 

Co CSS mógłbym napisać, aby wybrać tylko drugi element listy, w oparciu o fakt, że jest członkiem obu klas foo i bar?

Answer 1

Chain oba przełączniki klasy (bez przestrzeni pomiędzy nimi):

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

---

Jeśli nadal mamy do czynienia ze starymi przeglądarkami jak IE6, należy pamiętać, że nie czyta klasy selektorów połączonych była poprawnie : zamiast tego będzie tylko czytać selektor klasy last (.bar), niezależnie od tego, jakie inne klasy wypiszesz.

Aby zilustrować jak innych przeglądarek i IE6 zinterpretować to, rozważyć tę CSS:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

Wyjście na obsługiwanych przeglądarek 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] --> 

Wyjście na IE6 jest:

<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 jako element ten posiada klasę foo tylko.
  2. Wybrany ponieważ ten element ma obie klasy: foo i bar.
  3. Nie wybrano ponieważ ten element ma tylko klasę bar.
     
     
• IE6:
  1. Nie wybrano jako element ten nie posiada klasę bar.
  2. Wybrany ponieważ ten element ma klasę bar, niezależnie od innych wymienionych klas.