css - Select elements where attribute is non-empty

Question

Suppose I have the following:

<div data-pid="">Unknown</div>
<div data-pid="123">Known 123</div>

Is there a way in CSS to select only elements where the data-pid attribute is non-empty?

Answer 1

This works, if you don't mind doing things slightly backwards and you need it to work in browsers that don't support :not:

div[data-pid] {
    color: green;
}

div[data-pid=""] {
    color: inherit;
}

That will make all the divs with non-empty data-pids green.

Fiddle here: http://jsfiddle.net/ZuSRM/