Well, i have a code like this:
<div class="code">
<div>
<input id="yellow" type="radio" name="yellow" value="1">
<label for="yellow"> yellow</label>
</div>
<div>
<input id="red" type="radio" name="red" value="2">
<label for="red"> red</label>
</div>
<div>
<input id="black" type="radio" name="black" value="3">
<label for="black"> black</label>
</div>
<div>
<input id="green" type="radio" name="green" value="4">
<label for="green"> green</label>
</div>
</div>
Let's imagine, that user have selected one of these radiobuttons, for example, "black". I need to add some css to "black" label and all the labels, that goes before "black" - "red" and "yellow" labels.
It have to be something like this:
.code > div > label:checked ~ label:before { some css }
But not exactly, cause labels are not just neighbors, they are nested in their divs. What i have to add/change to this css selecting rule?