Is it possible to set an element's CSS value by another element's value?

Question

Say I have this code:

<div style="width:100%" id="a"></div>
<div id="b"></div>

I want the #b's height to equal #a's width and always following that value.

What I can do is to use JS to get #a's width and set it to #b's height.

However, is there any pure CSS way to do so, something like this:

#b {
  height:getvalue('#a', 'width');
}

Not in pure css unless using any css pre-processor.Try setting both values in css. It should solve your problem. — Sangam Belose, Jan 11 '21 at 05:54
Does this answer your question [How do I select an element based on the state of another element in the page with CSS?](https://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit) — Tanner Dolby, Jan 11 '21 at 05:55

score 0 · Answer 1 · answered Oct 02 '22 at 08:24

As Sangam Belose said setting both values in css is a valid option. You could define a variable in :root and access it from everywhere:

root:{
   --lenght: 100vw;
}
#a{
   width: var(--lenght);
}
#b{
   height: var(--lenght);
}

Unfortunally you would need JS to change this variable but most of the time there is a workaround for this like using aspect ratio.

1 Answers1