Is it possible to create a CSS selector like `parent[data-selected="$val1"] > child[data-id="$val1"]`?

I have the following HTML.

<ul data-selected="foo">
    <li data-id="foo">text</li>
    <li data-id="bar">text</li>
    <li data-id="baz">text</li>
</ul>

And the following CSS.

ul[data-selected="foo"] li[data-id="foo"],
ul[data-selected="bar"] li[data-id="bar"],
ul[data-selected="baz"] li[data-id="baz"]
{
    color: red;
}

foo in this example is an infinite number of dynamic values.

Is it possible to reduce this to one pure CSS selector (without JS continuously rewriting it)?

Something like:

ul[data-selected="$val1"] li[data-id="$val1"]

It's for a closed system so experimental CSS is fine.