<div class="wrap">
 <input name='selector' value='3' type='hidden' id='hide'>
  <div class='idiv' data-num='10'>
    <input name='selector' value='10' type='radio'>
  </div>
  <div class='idiv' data-num='9'>
    <input name='selector' value='9' type='radio'>
  </div>
  <div class='idiv' data-num='8'>
    <input name='selector' value='8' type='radio'>
  </div>
  <div class='idiv' data-num='7'>
    <input name='selector' value='7' type='radio'>
  </div>
  <div class='idiv' data-num='6'>
    <input name='selector' value='6' type='radio'>
  </div>
  <div class='idiv' data-num='5'>
    <input name='selector' value='5' type='radio'>
  </div>
  <div class='idiv' data-num='4'>
    <input name='selector' value='4' type='radio'>
  </div>
  <div class='idiv' data-num='3'>
    <input name='selector' value='3' type='radio'>
  </div>
  <div class='idiv' data-num='2'>
    <input name='selector' value='2' type='radio'>
  </div>
  <div class='idiv' data-num='1'>
    <input name='selector' value='1' type='radio'>
  </div>
</div>

.wrap {
	display:flex;
	flex-direction: column-reverse;
}
.idiv {
	position: relative;
	height: 30px;
	width: 30px;
}
#hide[value="1"] ~ .idiv[data-num= "1"], 
#hide[value="2"] ~ .idiv[data-num= "2"], #hide[value="2"] ~ .idiv[data-num= "2"] ~ div, 
#hide[value="3"] ~ .idiv[data-num= "3"], #hide[value="3"] ~ .idiv[data-num= "3"] ~ div,  
#hide[value="4"] ~ .idiv[data-num= "4"], #hide[value="4"] ~ .idiv[data-num= "4"] ~ div,  
#hide[value="5"] ~ .idiv[data-num= "5"], #hide[value="5"] ~ .idiv[data-num= "5"] ~ div,  
#hide[value="6"] ~ .idiv[data-num= "6"], #hide[value="6"] ~ .idiv[data-num= "6"] ~ div,  
#hide[value="7"] ~ .idiv[data-num= "7"], #hide[value="7"] ~ .idiv[data-num= "7"] ~ div,  
#hide[value="8"] ~ .idiv[data-num= "8"], #hide[value="8"] ~ .idiv[data-num= "8"] ~ div,  
#hide[value="9"] ~ .idiv[data-num= "9"], #hide[value="9"] ~ .idiv[data-num= "9"] ~ div,  
#hide[value="10"] ~ .idiv[data-num= "10"], #hide[value="10"] ~ .idiv[data-num= "10"] ~ div {
	background-color: red;
}