Impossibile trovare un selettore di attributi CSS "non uguale"

Voglio scegliere come target elementi div in cui l'attributo "foo" ha un valore.

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

Ho provato questo css, ma non funziona:

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

Usa il codice in questo modo:

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 problema con la risposta accettata è che selezionerà anche elementi che non hanno alcun fooattributo. Tener conto di:

<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=''])selezionerà sia il primo che il secondo divelemento. Se vuoi solo divelementi che hanno un attributo foo impostato su una stringa vuota, dovresti usare:

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

Se vuoi tutti gli elementi con attributo fooche non è né yné z, dovresti usare:

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

È possibile selezionare il primo utilizzando

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

VIOLINO

Leggi questo