CODEWITHSUNDEEP
htmlcss
rosuav
rosuav

Reputation: 476

CSS selectors based on selected radio button and element class

Consider the following HTML structure:

<input type=radio name=picker value=foo> <input type=radio name=picker value=bar> etc
<ul>
    <li class=foo>Foo #1</li>
    <li class=bar>Bar #1</li>
    <li class=foo>Foo #2</li>
    <li class=bar>Bar #2</li>
</ul>

I want to style those list items which match the currently-selected radio button. This works if all the possible radio button values are hard-coded:

input:checked[value=foo] ~ ul li[class~=foo] {
    background: blue;
    color: white;
}

input:checked[value=bar] ~ ul li[class~=bar] {
    background: blue;
    color: white;
}

Is there any way to say "input:checked" and then "li[class~=[the value of the currently-selected input]]" ? Assume that the radio buttons and list items are all dynamically generated.

If all else fails, I can dynamically generate the CSS too, but that seems unideal.

Upvotes: 2

Views: 659

Answers (1)

rosuav
rosuav

Reputation: 476

This seems to be a fundamental limitation of CSS (as of 2019 - if this changes in the future, someone can post a different answer). Since the input controls have to be script-generated anyway, it's simplest to script-generate the CSS as well.

Upvotes: 1

Related Questions