Не удается найти селектор атрибутов 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;
}

FIDDLE

Прочитайте это