Как поменять стили у дочерних блоков при нажатии на основной при помощи CSS?

Question

[AlexFo90]

Добрый день! вопрос вот какой: есть такой HTML, хочу сделать чтоб при нажатии на main-block менялись стили у его дочерних элементов. У block1 менялся background, у block2 цвет текста, у block3 тоже background. Все переключение идет checkbox. Может делаю неправильно, но вроде должно работать? Или стили пишу неправильно, вообщем запутался)
если у кого появиться желание подсказать, заранее благодарен!!!

<label for="push">
    <div class="main-block">
        <div class="block1"></div>
        <div class="block2"></div>
        <div class="block3"></div>
    </div>
</label>
<input type"checkbox" id="push">

CSS
или + (все равно не помогает)
input[type="checkbox"]:checked .main-block {
.block1 {
background-color: #999;
}
.block2 {
color: #fff;
}
.block3 {
background-color: #555;
}
}

Answer 1

[hellcaster]

input[type=checkbox]: checked ~ .main-block > .block1{}
input[type=checkbox]: checked ~ .main-block > .block2{}
input[type=checkbox]: checked ~ .main-block > .block3 {}

Comments

[hellcaster]

input и . main-block должы быть на одном уровне

[hellcaster]

С помощью такой комбинации можно сделать даже слайдер на CSS!

[AlexFo90]

Victor Muryn, Спасибо!

Answer 2

[Ольга Ветер]

у вас какой-то блок является дочерним относительно чекбокса? Вы уверены?
да и синтаксис для css не рабочий... в принципе.