Change several divs color in CSS by clicking radio button

Question

Is it possible to use just CSS to achieve the same output as the below example done in JavaScript. I want to perform this in only CSS.

HTML

<div class="first-div" id="black"></div>
<div class="second-div" id="blue" ></div>
<div class="third-div" id="green"></div>
<div class="forth-div" id="yellow"></div>
<br>
<input type="radio" value="Black" name="clr" onClick="f(this.value)">Black

<input type="radio" value="Blue" name="clr" onClick="f(this.value)" >Blue

<input type="radio"value="Green" name="clr" onClick="f(this.value)" >Green

<input type="radio"value="Yellow" name="clr" onClick="f(this.value)">Yellow

CSS

div{
  position:absolute;
  background-color:red;
  height:150px;
  width:150px;
  margin:10px;
}
.first-div{background-color:black;}
.second-div{background-color:blue;}
.third-div{background-color:green;}
.forth-div{background-color:yellow;}

JavaScript I want to perform the same functionality without JavaScript code. just applying CSS, hacking radio button to force it to change the color of clicked div

function f(IncValue)
    {
        if(IncValue=="Black")
        {
            document.getElementById('black').style.visibility="visible";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";

        }
        else if(IncValue=="Blue")
        {
            document.getElementById('blue').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Green")
        {
            document.getElementById('green').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Yellow")
        {
            document.getElementById('yellow').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
        }


    }

Answer 1

By moving the all the input buttons to be before the div elements in the DOM and then using general sibling selectors we can hide/show the required div (that corresponds to the selected color) alone.

In the below snippet, the following is what is being done:

• Whenever an input (radio) which has name="clr" is clicked, all div elements that are sibling of the input and have class='colored-div are hidden. I had changed the class name from the original snippet that was provided in question just to make sure that only those div elements are hidden. Otherwise we have to write a group of selector or use a generic div selector which will cause problems elsewhere (that is, other div present in the page will also get hidden).
• Based on the input (radio) that has been selected, only the div corresponding to the selected color is set to visibility: visible.

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
#black {
  background-color: black;
}
#blue {
  background-color: blue;
}
#green {
  background-color: green;
}
#yellow {
  background-color: yellow;
}
input[name="clr"]:checked ~ .colored-div {
  visibility: hidden;
}
input[value="Black"]:checked ~ #black {
  visibility: visible;
}
input[value="Blue"]:checked ~ #blue {
  visibility: visible;
}
input[value="Green"]:checked ~ #green {
  visibility: visible;
}
input[value="Yellow"]:checked ~ #yellow {
  visibility: visible;
}

<input type="radio" value="Black" name="clr">Black
<input type="radio" value="Blue" name="clr">Blue
<input type="radio" value="Green" name="clr">Green
<input type="radio" value="Yellow" name="clr">Yellow
<div class="colored-div" id="black"></div>
<div class="colored-div" id="blue"></div>
<div class="colored-div" id="green"></div>
<div class="colored-div" id="yellow"></div>

---

The same can be achieved by using just a single div element (instead of 4 div elements) and then changing their background color based on the selected radio button also. Below is a sample.

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
input[value="Black"]:checked ~ .colored-div {
  background-color: black;
}
input[value="Blue"]:checked ~ .colored-div {
  background-color: blue;
}
input[value="Green"]:checked ~ .colored-div {
  background-color: green;
}
input[value="Yellow"]:checked ~ .colored-div {
  background-color: yellow;
}

<input type="radio" value="Black" name="clr">Black
<input type="radio" value="Blue" name="clr">Blue
<input type="radio" value="Green" name="clr">Green
<input type="radio" value="Yellow" name="clr">Yellow
<div class="colored-div"></div>