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

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

           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">
          .....rest of code

and

        <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
                <div class="auto-btn5"></div>
        </div>

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);
cssbackgroundradio-buttonchecked


Solution 1:[1]

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;
}
           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">

                <div class="navigation-auto">
                        <div class="auto-btn1"></div>
                        <div class="auto-btn2"></div>
                        <div class="auto-btn3"></div>
                        <div class="auto-btn4"></div>
                        <div class="auto-btn5"></div>
                </div>
           </div>

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;
}
      <div class="navigation-auto">
              <div class="auto-btn1"></div>
              <div class="auto-btn2"></div>
              <div class="auto-btn3"></div>
              <div class="auto-btn4"></div>
              <div class="auto-btn5"></div>
      </div>
           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">
           </div>

Solution 2:[2]

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;
}

<div>
    <input type="radio" />
    <div>content</div>
</div>

<div>
    <input type="radio" />

    <p>paragraph</p>
    <div>content</div>
</div>

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Link Strifer

Related Questions