Why is radio:checked to change color of a div not working?

Question

So I have circle divs that are supposed to have a black background once the radios linked to them are checked (this is for a carousel that automatically cycles through javascript). However for some reason it just does not work for me. I tried just manually changing the background to black and it seems fine. Please help :(

this is the css

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: black;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
    background: black;
}

for the html it's cut in the middle due to other things but this is what's important

           
                
                
                
                
                
          .....rest of code

and

I'm not sure if this is enough information but please let me know if you need more. again, the divs did change color when i manually changed it, but the #radio:checked functionality does not seem to work for me.

this is the javascript

var counter = 1;
setInterval(function(){
    document.getElementById('radio' + counter).checked = true;
    counter++;
    if(counter >5){
        counter =1;
    }
}, 5000);

user_4656099 · Answer

your approach will not work because you are using the sibling selector, to make that work you need to put the div after each radio inside a container to avoid affecting other elements.

Something like this:

input[type="radio"]:checked ~ div {
  color: red;
}


    
    content



    

    paragraph
    content

Live example: https://codesandbox.io/s/wizardly-bhaskara-nln6gr?file=/src/styles.css:36-89

user_2930038 · Answer

The radio buttons must be above .navigation-auto element and have the same parent:

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: black;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
    background: black;
}



.navigation-auto > div
{
  width: 1em;
  height: 1em;
  display: inline-block;
  border: 1px solid red;
}

if that's not an option, you'll need use javascript for that:

for(let i = 0, nav = document.querySelector(".navigation-auto"), slides = document.querySelectorAll('.slides > input[name="radio-btn"]'); i < slides.length; i++)
{
  slides[i].addEventListener("click", e =>
  {
    for(let n = 0; n < nav.children.length; n++)
    {
      nav.children[n].classList.toggle("checked", n == i);
    }
  });
}

.navigation-auto > div.checked
{
  background-color: black;
}
.navigation-auto > div
{
  width: 1em;
  height: 1em;
  display: inline-block;
  border: 1px solid red;
}

Why is radio:checked to change color of a div not working?

2 Answers