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

Question

[AlexFo90]

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

<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

[Flying]

Для того чтобы всё заработало - необходимо чтобы input стоял перед label, а не после. CSS селекторы работают только "вперёд", соответственно если хочется завязать изменение стилей на состояние checkbox - он должен располагаться в DOM раньше чем элементы к которым будут применяться стили, зависящие от состояния checkbox'а

Comments

[AlexFo90]

Спасибо!

Answer 2

[Александр Алексеев]

[type=checkbox]:checked + .my_block {}
в этом вся магия

Comments

[AlexFo90]

Спасибо!