proposal: [css-variables] CSS variables in selectors

[matteobortolazzo]

It will be useful if you can use CSS variables in selectors.

Something like
.some-class:nth-child(var(--index))
or
input:[type=var(--some-input-type)]

[tabatkins]

Variables gain their values from properties on an element, but selectors aren't associated with any element (they tell us what elements to apply properties to!). So this fundamentally can't work with variables.

That said, the env() function, once we stabilize on how to add user-defined environment variables, should work for this.

[yairEO]

as someone working with CSS some ~20 years (not to brag, just to give perspective about my long experience with it) I think CSS variables should not be called "custom properties" because that limits the mind when thinking about them and forces a narrow view.

Variables gain their values from properties on an element, but selectors aren't associated with any element

Why should selectors "work" like that?

It's just a limitation imposed by the spec, not something that is technically impossible to achieve by simply agreeing to and then implementing.

I suggest to think about variables as not "properties" but as "variables" which may only be fined within a scope of a selector, but are not confined to be used only as properties' values.

---

A browser's CSS interpreter sees this:

.some-class:nth-child(var(--index))

 // or "attr" (I can't possibly follow all the countless discussions regarding "attr"...
.some-class:nth-child(attr(data-index))

And can safely assume to start looking for --index first in the selector .some-class and up from there, and whatever found is used, and if nothing found, the whole selector is ignored.

This behaviour is limited to selectors with (...).

A step further in the road to extreme manipulation of selectors is:

.some-class:var(--state, 'hover')

Imagine having the power to manipulate the rendered state, mimicking a user interaction...what would be the repercussions of such a powerful selector.. maybe security risk somehow? it is a highly-interesting prospect to consider.

---

Another example of mixed selector with a variable, which I cannot find a use-case for, thus can be ignored:

.var(--selector){ ... }

I assume the parser would consider "var" as an actual class and then see the parenthesis, which would confuse it. There is no way of letting the interpreter "know" that "here comes a variable", like SCSS's #{}

---

Final, general thoughts

What I am saying is, as a developer I want the maximum power of manipulation, over every aspect of the CSS, both selectors & properties. if we have dynamic properties, I want dynamic selectors as well. Because, why not. If someone will explain to me why it is impossible, I will sit quietly and wait another 20 years for a CSS-spec-miracle evolution.