Bir sınıf değerine göre CSS ile bir öğe seçmek için iki özel sınıflar için ayarlanan bağlıyor. Örneğin, diyelim ki 3 divs var ki:

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

CSS foo VE bar sınıfları hem de üyesi olduğu gerçeğine dayanarak YALNIZCA listedeki ikinci öğe seçmek için yazıyorum ne olabilir?

Her iki sınıf seçiciler (arasında bir boşluk olmadan) zincir:

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

Eğer hala eski tarayıcılar ile uğraşmak zorunda eğer IE6, zincirleme sınıf seçiciler doğru okumuyor unutmayın: sadece okuyunsonsınıf (bu durumda.bar) yerine, diğer sınıfları listesi ne olursa olsun seçici.

Nasıl diğer tarayıcılarda göstermek ve bu IE6 yorumlamak için, bu CSS düşünün:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Desteklenen tarayıcılar çıktı

<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] -->

IE6 üzerine çıktı

<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] -->

Dipnot:

• Desteklenen tarayıcılar:
  1. Seçili değilbu eleman sadece olduğu gibi sınıf foo.
  2. Seçilibu element olarak iki sınıf foo bar.
  3. Seçili değilbu eleman sadece olduğu gibi sınıf bar.
• IE6:
  1. Seçili değilbu element sınıfı bar yok gibi.
  2. Seçilibu öğe olarak sınıf bar Diğer sınıfları ne olursa olsun listelenmiştir.