Yalnızca 2 sınıf mevcutsa CSS ile bir öğeyi hedefleyebilir misiniz?

Muhtemelen zaten bildiğiniz gibi, bir boşlukla ayrılmış öğeler üzerinde birden çok sınıfınız olabilir.

Misal

<div class="content main"></div>

Ve CSS ile bunu hedefleyebilir divbiriyle .contentveya .main. Sadece ve ancak her iki sınıf da mevcutsa onu hedeflemenin bir yolu var mı ?

Misal

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

divYalnızca ilkini almak için hangi CSS seçiciyi kullanırdım (kullanamayacağımı .content:first-childveya benzerini varsayalım )?

Evet, sadece onları bağlamak: .content.main. CSS sınıf seçicisine bakın .

Ancak, sürüm 6'ya kadar olan Internet Explorer'ın birden çok sınıf seçiciyi desteklemediğini ve yalnızca soyadını onurlandırdığını unutmayın.

Sadece onun uğruna (Gerçekten bunu önermiyoruz) için, orada olup bunu yapmanın başka bir yolu:

.content[class~="main"] {}

Veya:

.main[class~="content"] {}

Referans: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "uyarı"] "foo" öznitelik değeri boşlukla ayrılmış değerler listesi olan herhangi bir E öğesi ile eşleşir ve bunlardan biri "uyarı" ya tam olarak eşittir

Demo: http://jsfiddle.net/eXrSg/

Bu neden gerçekten yararlıdır (en azından IE6 için):

IE6 birden fazla sınıfı desteklemediğinden, kullanamıyoruz .content.main, ancak IE-7.js gibi öznitelik seçiciyi etkinleştiren, ancak birden çok sınıf söz konusu olduğunda yine de başarısız gibi görünen bazı javascript kitaplıkları var . Bu geçici çözümü IE6'da javascript özellik seçiciyi etkinleştirerek test ettim ve çirkin ama işe yarıyor.

Henüz IE6'nın birden çok sınıf seçiciyi desteklemesini sağlayan bir betik bulamadım, ancak öznitelik seçicilerini etkinleştiren çok şey buldum. Biri işe yarayan birini biliyorsa , lütfen bu geçici çözümden kurtulabilmem için yorumlarda bana bir not verin.