İki sınıflı elemanlar için geçerli CSS Seçici

İki özel sınıfa ayarlanan sınıf özniteliğinin değerine dayalı olarak CSS'li bir öğe seçmenin bir yolu var mı? Örneğin, 3 divim olduğunu varsayalım:

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

Her iki foo AND bar sınıfının bir üyesi olmasına bağlı olarak SADECE listedeki ikinci öğeyi seçmek için hangi CSS yazabilirim?

Her iki sınıf seçiciyi de zincirleyin (aralarında boşluk olmadan):

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

IE6 gibi eski tarayıcılarla hala uğraşmak zorundaysanız, zincirleme sınıf seçicilerini doğru bir şekilde okumadığını unutmayın: listelediğiniz diğer sınıflara bakılmaksızın yalnızca son sınıf seçicisini ( .barbu durumda) okuyacaktır .

Diğer tarayıcıların ve IE6'nın bunu nasıl yorumladığını göstermek için şu CSS'yi düşünün:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Desteklenen tarayıcılarda çı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'da çı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] -->

Dipnotlar:

• Desteklenen tarayıcılar:
  1. Bu öğenin yalnızca sınıfı olduğu için seçilmedifoo .
  2. Seçilen bu element sınıfları hem sahip olduğu foove bar.
  3. Bu öğenin yalnızca sınıfı olduğu için seçilmedibar .
     
     
• IE6:
  1. Bu öğenin sınıfı olmadığı için seçilmedibar .
  2. Seçilen bu eleman sınıfını olduğu gibi bar, ne olursa olsun herhangi bir başka sınıfların sıraladı.