Impossible de trouver un sélecteur d'attribut CSS "différent de"

Je veux cibler les éléments div où l'attribut "foo" a une valeur.

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

J'ai essayé ce css, mais cela ne fonctionne pas:

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

Utilisez le code comme ceci:

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/

Un problème avec la réponse acceptée est qu'elle sélectionnera également des éléments qui n'ont pas du tout d' fooattribut. Considérer:

<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=''])sélectionnera à la fois le premier et le second divéléments. Si vous ne voulez divque des éléments dont l'attribut foo est défini sur une chaîne vide, vous devez utiliser:

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

Si vous voulez tous les éléments avec un attribut fooqui n'est ni yni z, vous devez utiliser:

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

Vous pouvez sélectionner le premier en utilisant

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

VIOLON

Lis ça