Get value of attribute in CSS

Question

I have this HTML code:

<div data-width="70"></div> 

I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:

div {     width: [data-width]; } 

I saw this was done somewhere, but I can't remember it. Thanks.

Answer 1

You need the attr CSS function:

div {     width: attr(data-width); } 

The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):

Answer 2

You cant pass data attribute value directly in to css without pseudo type content. Rather you can do this way.. CHECK THIS FIDDLE

<div data-width="a"></div><br> <div data-width="b"></div><br> <div data-width="c"></div> 

CSS

div[data-width="a"] {     background-color: gray;     height: 10px;     width:70px; } div[data-width="b"] {     background-color: gray;     height: 10px;     width:80px; } div[data-width="c"] {     background-color: gray;     height: 10px;     width:90px; }