Hoodboi Hoodboi - 1 month ago 7
CSS Question

Getting specific value from HTML attribute using only CSS

I would like to know is it possible to get the img_url value using only CSS so i can use images as background for every tr element.

<tr class="title-row" id="title-49042" data-title-id="49042" data-attrs="{"global_rates":{"total":9.1099999999999994,"story":9.0299999999999994,"graphics":8.9199999999999999,"music":8.6799999999999997,"titlecahracters":9.0800000000000001},"img_url":"\/res\/images\/100x100\/208614.jpg"}">

I have no access to html just the CSS file. The img urls are generated automatically for every tr element.

Answer Source

Assuming you meant to escape those quotes within data-attr so that it's valid HTML, this isn't possible.

Eventually, browsers will support the new attr syntax that allows specifying a type parameter. That will allow for things like:

div {
  height: 200px;
  width: 200px;
  background: attr(data-img url);
<div data-img="https://unsplash.it/200"></div>


  1. As of time of writing, no browser supports this.
  2. Even if they did, there's no way to extract a JSON value from an attribute using only CSS.

What you are trying to achieve is currently, and possibly always will be, impossible. The only way to do what you want is to change the HTML or use JavaScript.