Выберите элементы, где атрибут не пуст

Предположим, что у меня есть следующее:

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

Есть ли способ в CSS выбирать только те элементы, где атрибут data-pid не пуст?

Ответ 1

Это работает, если вы не против делать что-то немного назад, и вам нужно, чтобы он работал в браузерах, которые не поддерживают :not:

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

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

Это сделает все div с непустым data-pid зеленым.

Заклинание здесь: http://jsfiddle.net/ZuSRM/

Ответ 2

Выглядит уродливо, но что-то вроде этого должно это сделать:

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

jsFiddle Demo

С небольшим Javascript вы также можете добавлять классы, если вам нужно поддерживать старые браузеры.

Ответ 3

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

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

jsFiddle.

Это будет иметь гораздо лучшую поддержку браузера. Вместо того, чтобы выбирать те, которые вы хотите, поместите их все, а затем поместите различия во втором селекторе.