Не вдається знайти селектор атрибутів css "не рівний"

Я хочу націлити елементи div, де атрибут "foo" має значення.

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

Я спробував цей css, але він не працює:

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

Використовуйте такий код:

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/

Одна з проблем прийнятої відповіді полягає в тому, що вона також вибере елементи, які взагалі не мають fooатрибута. Поміркуйте:

<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=''])вибере і перший, і другий divелементи. Якщо ви хочете лише divелементи, у яких атрибут foo, встановлений у порожній рядок, слід використовувати:

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

Якщо ви хочете, щоб усі елементи з атрибутом, fooякий не є ані yані тим z, ні , слід використовувати:

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

Ви можете вибрати перший за допомогою

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

ПІДТВОРЕННЯ

Прочитай це