3 ms·

Do CSS variables let you count arbitrarily-deep nesting levels? That is, can a rule for `x` defined a variable that matches the number in the immediate text her

• lcnPylGDnU4H9OF 11mo ago
  Variables are defined and cascade the same as any other property. You can define variables and other properties on the third-level x element in your markup like so: x > x > x { --my-variable: 'my-value'; display: inline; /* etc. */ } It would be used by defining the value of another property as the value of the variable. Note the selectors don't have to match; in this case all x elements will have their content properties set to the --my-variable value but only the third-nested x element will have a --my-variable value set. x { content: var(--my-variable); } Not that this is a particularly coherent example but hopefully you get the idea.
  • o11c 11mo ago
    So, the answer is "no", since that's just old-school finite depth counting.
• kizmarh 11mo ago
  Not by themselves, at least today, as we can't currently modify the value of a custom property by using itself in the calculation. But in the future we will have an `inherit()` functional notation that will unlock this (and at least Chrome implemented it in Canary already — https://blog.kizu.dev/play-with-inherit-function/ https://blog.kizu.dev/play-with-inherit-function/). It is possible to use style queries and some hacks (https://kizu.dev/self-modifying-variables/ https://kizu.dev/self-modifying-variables/) to achieve this today, but that doesn't bring this closer to production, as Firefox still does not support them (but will be soon).