「等しくない」CSS属性セレクターが見つからない

属性「foo」に値があるdiv要素をターゲットにしたい。

<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/

受け入れられた回答の1つの問題は、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=''])最初と2番目のdiv要素の両方が選択されます。div空の文字列に設定された属性fooを持つ要素のみが必要な場合は、次を使用する必要があります。

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

属性fooがyでもzでもないすべての要素が必要な場合は、以下を使用する必要があります。

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

あなたはを使用して最初のものを選択することができます

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

FIDDLE

これを読む