Как управлять через input, label и :checked дочерними элементами?

Question

[Виталий]

Есть зеленый блок (blok), который перемещается с одного края на другой. Управляется двумя розовыми кнопками (через input, label и :checked). Внутри зеленого блока есть красный (blokmini). Можно ли посредством этих же розовых "кнопок" управлять и этим дочерним красным блоком? Например сделать его невидимым во втором положении. Если написать #knopka2:checked ~ .blokmini {visibility: hidden;} - ничего не происходит.



HTML:

<div class="telo">

<input type="radio" name="kp" id="knopka1">
<input type="radio" name="kp" id="knopka2">

<div class="blok"><div class="blokmini"></div></div>

<div class="nav">
<label for="knopka1" class="dk"></label>
<label for="knopka2" class="dk"></label>
</div>

</div>

CSS:

.telo {width: 700px; height: 110px; margin-left: auto; margin-right: auto; background-color: rgb(52, 194, 230); padding-top: 10px;}

.blok {width: 100px; height: 50px; background-color: rgb(143, 212, 78);}
.blokmini {width: 30px; height: 30px; background-color: rgb(255, 38, 0)}

label {cursor: pointer;}
#knopka1 {display: none;}
#knopka2 {display: none;}

#knopka1:checked ~ .block {transform: translateX(0px); transition: all 2.1s ease}
#knopka2:checked ~ .block {transform: translateX(600px); transition: all 2.1s ease}

#knopka1:checked ~ .blokmini {visibility: visible;}
#knopka2:checked ~ .blokmini {visibility: hidden;}

.nav {text-align: center;}
.dk {display: inline-block; width: 30px; height: 30px; background-color: rgb(252, 83, 172)}

Comments

[Ankhena]

Раз вы можете управлять .block, то и его дочерними тоже.

#knopka1:checked ~ .block .blokmini {}

[Виталий]

Спасибо! Работает