CSS for selecting based on a data-* attribute containing an array of values?

Question

I need to select a HTML element based on data in an attribute called "data-attributes". In Firefox's DOM Inspector, the attribute value appears like this:

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

I have tried using a CSS selector like below, to no avail:

div[data-attributes~="LIC"]

So I assume the attribute value is not a string as such, but a javascript object being shown by the Inspector as a Json string. The question is, how do I select the node based on one of the key/value pairs in the object it contains? Is this possible in CSS?

Answer 1

The attribute is just a string as far as css is concerned. You could probably use div[data-attributes*="LIC"], though that isn't checking the json key - the *= operator in CSS just means that the attribute includes that substring. So it'd also match ["LIC2":"foo"] and similar.

Maybe [data-attributes*=":\"LIC\""] would be good enough for your case though.