element selectors after a checked checkbox not working properly

I am toggling two images when the checkbox is clicked. The first three selectors are working fine but the last one is not working as expected, i.e., the background of 'Sample' is not rendering blue.

  <label>
   <input type="checkbox" class="input">
   <img src="sample-1.png" class="img-1" >
   <img src="sample-2.png" class="img-2" >
   <span>Sample</span>
 </label>

In css,

.input {
    display: none;
}
.input ~ .img-2, 
.input:checked ~ img-1 {
    display: none; 
}
.input:checked ~ .img-2 {
    display: inline-block; 
 }
.input:checked ~ span {
    background: blue;
 }

What's missing here? Thanks in advance.