When it comes to the html structure:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
Is there a method to create recursive variables that utilize their parent's value:
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
The provided code is invalid due to the fact that css variables cannot have dependency cycles. Here is another example of an invalid scenario:
body > div {
--is-even: 0;
--is-odd: 1;
}
div {
--is-even: var(--is-odd);
--is-odd: var(--is-even);
}
Are there alternative methods to represent such recursive variables in css?