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?

The ~= would not be the proper check, as that looks for "a space separated list of words." — ScottS
– ScottS, Commented Nov 10, 2013 at 21:56

Adam D. Ruppe · Accepted Answer · 2013-11-08 01:33:34Z

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.

"The attribute is just a string as far as css is concerned." Correct.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related