CSS Format Input (checked) Conditionally - html

Question

I'm able to change the color of radio label text when the button is checked (eg. turning the text green), but I'd like to do so conditionally. Ie. When option 1 is checked, I want the text to change to green, and when option 2 is checked I want the text to be red.
[JSFiddle][1]
HTML
<div class="radio">
<input type="radio" name="option"><label>Red when checked</label>
</div>
<div class="radio">
<input type="radio" name="option"><label>Green when checked</label>
</div>
CSS
input[type=radio]:checked + label {
color: green;
}

Answer 1

If you just want each item to have its own color when checked, you can use more specific selectors:
input[type=radio]:nth-child(1):checked {
color: green;
}
input[type=radio]:nth-child(2):checked {
color: red;
}
If you want both items to take on the same color, CSS alone can't do that yet. You'll need to use JavaScript to add a class to a parent container and set the styles based on that. Something like this:
HTML:
<div id="container">
<div class="radio" data-color="green">
<input type="radio" name="option"><label>Red when checked</label>
</div>
<div class="radio" data-color="red">
<input type="radio" name="option"><label>Green when checked</label>
</div>
</div>
JavaScript:
const container = document.getElementById("container");
container.addEventListener("input", (event) => {
container.className = event.target.dataset.color;
})
CSS:
.green input[type=radio] {
color: green;
}
.red input[type=radio] {
color: red;
}

Answer 2

i recommend using JavaScript functions like
document.queryselectorAll()