Can't find a "not equal" css attribute selector
Use the code like this:
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/
One problem with the accepted answer is that it will also select elements that do not have a foo
attribute at all. Consider:
<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=''])
will select both the first and second div
elements. If you only want div
elements that have an attribute foo that is set to an empty string, you should use:
div[foo]:not([foo=''])
If you want all elements with attribute foo
that is neither y
nor z
, you should use:
div[foo]:not([foo='y']):not([foo='z'])