CSS newbie here.

I wrote this HTML markup:

<label><span class="value">1</span><input type="radio" name="rating" value="1"></label>

And tried these CSS to change the background-color and color properties of <span class="value">1</span> when the radio button was checked (I also have input element’s appearance set to none):

label input[type="radio"]:checked ~ .value{...}

input:checked ~ .value{...}

.value+input[type="radio"]:checked{...}

input[type="radio"]:checked+.value{...}

.value:has(input:checked){...}

input:checked:has(.value){...}

But none of these worked. In the end, when I put the input element outside the label and added this style, it worked:

input[type="radio"]:checked+label{...}

Changed HTML markup (had to wrap them in a <div> for styling):

<div class="wrapper">
    <input type="radio" name="rating" value="1" id="one">
    <label for="one">1</label>
</div>

Why did it not work with the previous markup? Does nesting input inside label change something?

I tried these solutions:

• CSS – How to Style a Selected Radio Buttons Label? (I altered the solution mentioned in this link a bit, but none of them, this and the link below, have input nested inside label)
• change label color radio when checked