match css selectors that are not on the same level - css

Question

I need to match the selectors that I put down in the image but I can't find any css property to do it
The point is that I need that when the input-radio is checked the button is seen in another color, any css expert that can help me?
Thanks
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"></span>
</div>
<label for="28">5/6</label>
enter image description here

Answer 1

You cannot select parent elements via css, therefor you have to use script and toggle element classes. One way to do it:
$('.attribute_radio').each(function(i) {
var thisRadio = $(this);
var thisName = thisRadio.attr('name');
var groupRadios = $('.attribute_radio[name='+thisName+']');
thisRadio.on('change', function() {
groupRadios.each(function(j) {
var thatRadio = $(this);
thatRadio.closest('.radio').toggleClass('radio_checked', thatRadio.is(':checked'));
/* You could also target the label itself this way: */
var labelId = thatRadio.attr('id');
var thatLabel = $('label[for='+labelId+']');
thatLabel.toggleClass('label_checked', thatRadio.is(':checked'));
});
}).trigger('change');
});
.radio {
display: none;
}
.radio + label {
display: inline-block;
padding: 10px 14px;
min-width: 50px;
background: #ddd;
color: #444;
border: 3px solid #444;
border-radius: 6px;
}
.radio_checked + label {
background: yellow;
}
.label_checked {
/* Any styles */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Group 1
</p>
<div class="radio" id="uniform-27">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="27" id="27">
</span>
</div>
<label for="27">4</label>
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28" checked="checked">
</span>
</div>
<label for="28">5/6</label>
<p>
Group 2
</p>
<div class="radio" id="uniform-37">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="37" id="37" checked="checked">
</span>
</div>
<label for="37">XS</label>
<div class="radio" id="uniform-38">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="38" id="38">
</span>
</div>
<label for="38">S</label>
Also on JSFiddle.

Answer 2

I think you should restructure your DOM and that will make it easy for you to apply CSS.
How about this?
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"/>
<label for="28">5/6</label>
</span>
</div>
And then you can apply style you want
.checked label {
background-color: yellow;
}
This way you don't have to do extra wotk with JS and CSS.
Also you might have to change your existing CSS if you want use above HTML.