How can I change the styles from the child units when clicking on basic when using CSS?

Good day! the question is this: is this HTML, I want to make so when you click on main-block varied styles of its children. Have a varied background block1, block2 text color, background block3, too. All switching is checkbox. Can doing wrong, but it seems to work? Styles or writing incorrectly, in General, entangled)
if anyone be tempted to suggest, thanks in advance!!!
Without Js!

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

or + (still not helping)
input[type="checkbox"]:checked .main-block {
.block1 {
background-color: #999;
.block2 {
color: #fff;
.block3 {
background-color: #555;
June 3rd 19 at 21:05
2 answers
June 3rd 19 at 21:07
In order to work - you need to input stood before label, not after. CSS selectors only work "forward", respectively, if you want to tie the styles to change the state of a checkbox - it needs to be in before the DOM elements to apply styles depending on the state and checkbox'
Thank you! - avis94 commented on June 3rd 19 at 21:10
June 3rd 19 at 21:09
[type=checkbox]:checked + .my_block {}
that's the magic
Thank you! - avis94 commented on June 3rd 19 at 21:12

Find more questions by tags HTMLCSSLayout