CSS для выбора на основе атрибута data- *, содержащего массив значений?

Question

Мне нужно выбрать элемент HTML на основе данных в атрибуте «data-attributes». В Firefox DOM-инспектор, значение атрибута будет выглядеть так:

<div data-attributes="[{"Id":50,"Code":"LIC","ShowInSessionFilter":false}]"> 

Я попытался с помощью селектора CSS, как показано ниже, но безрезультатно:

div[data-attributes~="LIC"] 

Таким образом я предполагаю, значение атрибута не является строкой как таковой, но объект javascript, отображаемый Инспектором как строка Json. Вопрос в том, как выбрать узел на основе одной из пар ключ/значение в содержащемся в нем объекте? Возможно ли это в CSS?

Answer 1

Атрибут - это всего лишь строка, относящаяся к css. Вероятно, вы можете использовать div[data-attributes*="LIC"], хотя это не проверяет ключ json - оператор * = в CSS просто означает, что этот атрибут содержит эту подстроку. Таким образом, он также будет соответствовать ["LIC2": "foo"] и тому подобное.

Возможно, [data-attributes*=":\"LIC\""] будет достаточно хорошим для вашего случая.