Hello, everyone.
How do I inherit a value from a given attribute in CSS?
Example:
<div class="flex" id="1" style="line-height: 100px; height: 100px; background-color: red;">1</div>
<div class="flex" id="1" style="line-height: 200px; height: 200px; background-color: blue;">2</div>
<div class="flex" id="3" style="line-height: 300px; height: 300px; background-color: green;">3</div>In this case, I wanted the document to just match every line-heigh with height . How do I do this?
Here's an option using CSS tags .
The idea here starts from a base value set in the variable --altura , then we will make the overhide (overwrite) the value of that variable where we want. Note that you only need to change the value of the variable and will replace both height and line-height of the element. In short you only declare 1 variable value that replaces the value of the 2 attributes that you want to change I left commented in the code to facilitate
:root {
--altura: 100px; /* valor "base" */
}
.altura, .altura2, .altura3 {
height: var(--altura); /* valor "da variável" */
line-height: var(--altura); /* valor "da variável" */
}
.altura2 {
--altura: 200px; /* overhide do valor da variável */
}
.altura3 {
--altura: 300px; /* overhide do valor da variável */
}
<div class="altura" id="1" style="background-color: red;">1</div>
<div class="altura2" id="1" style="background-color: blue;">2</div>
<div class="altura3" id="3" style="background-color: green;">3</div>
See the browser support, please note that it just does not work in IE link