Tidak dapat menemukan pemilih atribut css "tidak sama"

Saya ingin menargetkan elemen div di mana atribut "foo" memiliki nilai.

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

Saya telah mencoba css ini, tetapi tidak berhasil:

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

Gunakan kode seperti ini:

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/

Satu masalah dengan jawaban yang diterima adalah bahwa jawaban tersebut juga akan memilih elemen yang tidak memiliki fooatribut sama sekali. Mempertimbangkan:

<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=''])akan memilih elemen pertama dan kedua div. Jika Anda hanya menginginkan divelemen yang memiliki atribut foo yang disetel ke string kosong, Anda harus menggunakan:

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

Jika Anda menginginkan semua elemen dengan atribut fooyang bukan ynor z, Anda harus menggunakan:

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

Anda dapat memilih yang pertama menggunakan

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

BIOLA

Baca ini