styling an element when checkbox is checked

Question

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
    <span></span>
    <span></span>
</div>

I want to style span when checkbox is checked. I tried below style but its not working.

input:checked ~ div span{
    background: red;
}

input:checked~div span {
  background: red;
}

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
  <span></span>
  <span></span>
</div>

Answer 1

Put some content inside your span, it's working.

input:checked ~ div span{
    background: red;
}

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
    <span>Red Text</span>
    <span>Red alert</span>
</div>