CODEWITHSUNDEEP
csscss-selectors
Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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?

Upvotes: 29

Views: 23210

Answers (4)

Native Dev
Native Dev

Reputation: 7372

Directly answering the OP's notes: div[data-pid]:not([data-pid=""]) { ... } will work cleanly as @kapa shared.

But thoroughly addressing the title question, and addressing another common use case:

HTML:

<a>Should NOT have cursor pointer. NOT linkable.</a>
<a href>Should NOT have cursor pointer. NOT linkable.</a>
<a href="">Should NOT have cursor pointer. NOT linkable.</a>

<a href="https://stackoverflow.com/">SHOULD have cursor pointer.</a>

CSS:

a {
  cursor: pointer;
}

a:not([href]), /* Accounts for <a> */
a[href=""] /* Accounts for <a href> and <a href=""> */
{
  cursor: default;
}

MDN Attribute Selectors is a great resource for a ton of other similar attribute selectors when concerned with their values.

Upvotes: 2

alex
alex

Reputation: 490173

/* 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.

Upvotes: 8

RichieHindle
RichieHindle

Reputation: 281415

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/

Upvotes: 44

kapa
kapa

Reputation: 78671

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.

Upvotes: 46

Related Questions