How to set dynamic property name in var ()

Question

I am trying to use custom properties based on dynamic values ​​like attr() .

For example, in the code below, I tried to access both custom properties based on the current id attribute.

 :root{ --app-foo: 'Hello'; --app-bar: 'World'; } div::after{ /* expected : 'Hello' for #foo 'World' for #bar */ content: var('--app-'attr(id)); } 

 <div id="foo"></div> <div id="bar"></div> 

But he obviously fails.

Is there any way to achieve this?

Answer 1

the grammar does not allow the first argument of the var() expression to be anything other than a single arbitrary property name that has been hard-coded. This means that you cannot choose which custom property to reference in the var() expression using CSS, because it does not accept a string (or an attr() expression that returns a string) for the property name. You will need to set the value containing the var() expression using JS.