Assign CSS var() to style property value of another CSS element with pure CSS?

Question

Assuming I have an element #banner with font-size: 36px; as shown in the Code Snippet below:

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>

How can I retrieve that 36px from #banner's css property font-size and assign it to a css variable so I can use the calc() function to dynamically set the font-size of another element, say #someOtherBanner to #banner's font-size value divided by say, 3 thus returning 12px.

A dummy representation of what I'm looking for can be seen in the Code Snippet below:

:root {
  --bannerFontSize: #banner.font-size;
}

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}
#someOtherBanner {
    font-size: calc(var(--bannerFontSize) / 3); // should return 12px
    width: 100%;
    background-color: green;
    text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

The closest thing I found that might help was the CSS attr() function that retrieves an attribute's value from HTML elements (one can use this to set elements' css properties to an attribute while simultaneously setting css variables to the attribute's value) but according to CanIUse.com, it is not compatible with any browser so far.

This would be a piece of cake using JavaScript or css preprocessors like SCSS but what would be the Vanilla CSS approach to do this?

to start with: if both element don't have any relation of parent/child then there is no way to share some value considering inheritance. Even common CSS variable won't work (unless you consider :root or a shared parent element) — Temani Afif
– Temani Afif, Commented Jan 10, 2019 at 20:25
So unless browsers fixes the compatibility issues of the CSS attr() function, there is no way to do this? — AndrewL64
– AndrewL64, Commented Jan 10, 2019 at 20:29
Even with attr() I don't see how you can do it with sibling element — Temani Afif
– Temani Afif, Commented Jan 10, 2019 at 20:57
@TemaniAfif Instead of an element interacting directly with it's sibling, it can just use the value that css variable retrieved from the sibling using the attr() function. — AndrewL64
– AndrewL64, Commented Jan 10, 2019 at 21:19
in this case simply use an inline CSS variable instead of an attribute (jsfiddle.net/vgzuyLkb). If you are able to set attribute you can set inline style — Temani Afif
– Temani Afif, Commented Jan 10, 2019 at 21:22

Obsidian Age · Accepted Answer · 2019-01-10 20:31:45Z

3

One thing you could do is simply use the same CSS variable as both the font-size in the banner and the padding in the secondary banner.

This would look like this:

:root {
  --bannerFontSize: 36px;
}

#banner {
  font-size: var(--bannerFontSize);
  width: 100%;
  background-color: red;
  text-align: center;
}

#someOtherBanner {
  padding: calc(var(--bannerFontSize) / 3);
  width: 100%;
  background-color: green;
  text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

Note that in your example you have a division by / 3px, whereas you want / 3.

answered Jan 10, 2019 at 20:31

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndrewL64 Over a year ago

Corrected the / 3px to / 3. Thanks for the heads up man. And yes, using a common css variable would be the best way to go about this but assuming I have to change the layout of a site with a bunch of elements with the same class names (not id) having their own unique inline font-style properties in the HTML, it would be easier if I could retrieve an element's current property value and perform calculations based on the value instead.

Collectives™ on Stack Overflow

Assign CSS var() to style property value of another CSS element with pure CSS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related