I am trying to use checkbox to change color of element but it doesn't works

Question

I am trying to use "check box" to change color of element.

HTML:

<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div class="reklama">I'm controlled by toggle. No JavaScript!</div>

CSS:

.reklama {
  color:Red;
}

input#toggle-1: checked ~ .reklama{
  color:green;  
}

U can find my demo here.

Answer 1

You can't have any spaces before the ":checked", so that it is directly connected to your id. This will work in your CSS

input#toggle-1:checked ~ .reklama{