CSS select radiobutton of group before the check one

Question

I'm looking to style some radio buttons in a group. I cannot use any JS, so only css.

<input type="radio" name="attr_1" value="1">
<input type="radio" name="attr_1" value="2">
<input type="radio" name="attr_1" value="3">
<input type="radio" name="attr_1" value="4">
<input type="radio" name="attr_1" value="5">

With the :checked selector I can change the appearance for the selected input but I want to be able to select all radio buttons with a lower value than the one I have checked.

input[type='radio'] {
    background-color: red
}

input[type='radio']:checked + input {
    background-color: black
}

For example, if the radio button with value 3 is selected it will have a red background but I also want the 1 & 2 to have a red background. Using JS I would easily do this, but I can only use CSS.

Is there any way i can have all following inputs instead of only the 1 input behind the ckecked one?

sadly in the enviroment i'nm working no javascript is allowed at all. — Leo Boulanger, Feb 13 '18 at 22:14
If you can reverse the order of the elements in the DOM, you can probably do this with `+` or `~` selectors. Using flex or positioning, you can reverse the visual order of the elements. — ProdigySim, Feb 13 '18 at 22:15
Possible duplicate of [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — mpro, Feb 13 '18 at 22:15
@mpro Ii know that there is no previous sibling selector, I was hoping for someone who could think of something more logic. i thought about stuff like comparing the values to eachother, but sadly css doesn't do that either. — Leo Boulanger, Feb 13 '18 at 22:19
@ProdigySim could you give me a exsample of what you thought? I thought about the + and ~ selectors as well, but came to no effect i could use. and i don't see a reason to invert the order or the items. if the order is the only problem i should be able to simple negate the syles. make everything red, apart from those behind selected — Leo Boulanger, Feb 13 '18 at 22:22
Fine, but read answers to that questions, some are interesting, and actually, it is a duplicate, saw few of these here, the last one yesterday ;) — mpro, Feb 13 '18 at 22:22

score 0 · Accepted Answer · edited Jul 21 '20 at 19:38

Thanks to @mpro I could figure out a way to get all my following Styles differentiated from the once before the checked element.

<input type="radio" name="attr_1" value="1">
<input type="radio" name="attr_1" value="2">
<input type="radio" name="attr_1" value="3">
<input type="radio" name="attr_1" value="4">
<input type="radio" name="attr_1" value="5">

input {
    background-color: red;
}
input:checked ~ input {
    background-color: black
}

this required me to have at least one Radiobutton selected, but i got that anyways. Thanks for all the help guys

CSS select radiobutton of group before the check one

1 Answers1