CSS selectors based on selected radio button and element class

Question

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.

@Awais Yes, this is more than can be done with simple sibling selectors. — rosuav
– rosuav, Commented Dec 2, 2019 at 13:34
if next sibling selector won't solve your problem (as in that link in the first comment) you should try with javascript — Ivana Bakija
– Ivana Bakija, Commented Dec 2, 2019 at 13:37

rosuav · Accepted Answer · 2019-12-06 08:50:36Z

1

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.

answered Dec 6, 2019 at 8:50

rosuav

4864 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS selectors based on selected radio button and element class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related