Search code examples
csscss-selectors

Select elements where attribute is non-empty

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?

Solution

  • 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/