styling an element when checkbox is checked - css

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>

Answer 2

You are having a div inside a p tag, thats causing the issue, Change your structure and CSS like shown below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.abc {
position: relative;
text-align: center;
height: 100px;
font: 100px/1em sans-serif;
top: 50vh;
transform: translateY(-50%);
}
input {
visibility: hidden;
}
label {
cursor: pointer;
}
input+label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
height: 100px;
width: 100px;
margin: 0 1em 0 0;
border-radius: 50%;
}
input:checked+label:before {
border: none;
background: #fff;
color: #333;
content: "\2713";
text-align: center;
}
input:checked+label:after {
font-weight: bold;
}
input:focus+label::before {
outline: rgb(59, 153, 252) auto 5px;
}
.def {
width: 100px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-140%, -50%);
z-index: -1;
}
span {
background: green;
width: 20px;
height: 20px;
top: 50%;
left: 55%;
transform: translate(-50%, -55%);
position: absolute;
border-radius: 50%;
}
span:nth-child(1) {
left: 120%;
/* background:green; */
}
span:nth-child(2) {
top: 115%;
/* background:red; */
}
span:nth-child(3) {
left: -10%;
/* background:blue; */
}
span:nth-child(4) {
top: -10%;
/* background:yellow; */
}
/* styles for span when checkbox is checked */
input:checked~div span {
background: red;
}
<div class="abc">
<input type="checkbox" id="c1" />
<label for="c1">c1</label>
<div class="def">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

Answer 3

A span doesn't have anything inside, and takes up no space, by default. Your code works for me if I add text inside the span.