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/

Answer 2

Looks ugly, but something like this should do it:

[data-pid]:not([data-pid=""])

jsFiddle Demo

With a little Javascript you could also add classes, if you need to support older browsers.

Answer 3

/* Normal styles */
[data-pid] {}

/* Differences */
[data-pid=""] {}

jsFiddle.

This will have much better browser support. Instead of selecting the ones you want, style all of them and then place the differences in the second selector.