"Eşit olmayan" bir css özellik seçicisi bulamıyorum

"Foo" özniteliğinin bir değere sahip olduğu div öğelerini hedeflemek istiyorum.

<div foo="x">XXX</div>
<div foo="">YYY</div>

Bu css'yi denedim ama işe yaramıyor:

[foo!='']
{
   background: red;
}

Kodu şu şekilde kullanın:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

:not([foo=''])
{
    background: red;
}

http://jsfiddle.net/gsLvuys0/

Kabul edilen yanıtla ilgili bir sorun, aynı zamanda bir fooözniteliğe sahip olmayan öğeleri de seçmesidir . Düşünmek:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo=''])hem birinci hem de ikinci divöğeleri seçecektir . Yalnızca divfoo özniteliği boş bir dizeye ayarlanmış öğeleri istiyorsanız, şunu kullanmalısınız:

div[foo]:not([foo=''])

Özniteliği foone olan ne yde olan tüm öğeleri zistiyorsanız, şunu kullanmalısınız:

div[foo]:not([foo='y']):not([foo='z'])

Kullanarak ilkini seçebilirsiniz

[foo = 'x']{
  background:red;
}

VAKTİNİ BOŞA HARCAMAK

Oku bunu