Подтвердить что ты не робот

Невозможно найти "не равный" селектор атрибутов css

Я хочу привязать элементы div, где атрибут "foo" имеет значение.

<div foo="x">XXX</div>
<div foo="">YYY</div>

Я пробовал этот css, но он не работает:

[foo!='']
{
   background: red;
}

Ответ 1

Используйте следующий код:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

Ответ 2

:not([foo=''])
{
    background: red;
}

http://jsfiddle.net/gsLvuys0/

Ответ 3

Вы можете выбрать первый, используя

[foo = 'x']{
  background:red;
}

FIDDLE

Прочтите это

Ответ 4

Одна из проблем с ответом, приведенным выше, заключается в том, что он также будет выбирать элементы, которые вообще не имеют атрибута "foo". Рассматривать:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div: not ([foo = '']) выберет как первый, так и второй элементы div. Если вы просто хотите, чтобы элементы div имели атрибут foo с пустой строкой, вы должны использовать:

div[foo]:not([foo=''])

В последнем примере, если вы хотите, чтобы все элементы с атрибутом foo отличались от "y" или "z", вы должны использовать:

div[foo]:not([foo='y']):not([foo='z'])

И, конечно, div можно вообще отключить, если выбрать элементы, отличные от div.