Radio Checked Element Select Sass - html

Question

I have a radio button that, when I check it, should affect another element.
I couldn't do it. I've tried to affect a couple of elements. Nothing worked.
My HTML markup:
<label for="1">
<div class="card card-1">
<input class="card__input-1"type="radio" name="card" id="1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
SASS:
.card__input-1:checked .card-1{
background-color: orangered;
}
No error messages.

Answer 1

You can use the + or ~ CSS selectors to affect elements following the input in the document flow, but which share the same parent, like so:
.card__input-1:checked ~ .card-1 {
background-color: orangered;
}
<label for="1">
<input class="card__input-1"type="radio" name="card" id="1">
<div class="card card-1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
The + selector allows you to select an element that appears immediately after within the document flow, and the ~ selector allows you to select any element that follows (so is sort of like a "super-plus" selector).
But to affect parent elements you will need to use JavaScript