testing

<style>

body{
margin-left: 100px;
margin-top:100px;}

#thebox{
position: absolute;
left: 200px;
top: 200px;
height: 100px;
width: 100px;
background: black;
-webkit-transition: all 1s;
transition: all 1s;
box-sizing: border-box;}

#div1:target ~ #thebox{
background: red;}

#div2:target ~ #thebox{
background: brown;}

#div3:target ~ #thebox{
background: green;}


#theswitch:checked ~ #div1:target ~ #thebox{
background: pink;
border: 5px solid red;}

#theswitch:checked ~ #div2:target ~ #thebox{
background: blue;
border: 5px solid brown;}

#theswitch:checked ~ #div3:target ~ #thebox{
background: yellow;
border: 5px solid green;}



</style>

<input type="checkbox" id="theswitch">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<div id="thebox">
</div>

<label for="theswitch">
Hey.</label><br><br>

<a href="#div1">Div 1.</a><br><br>
<a href="#div2">Div 2.</a><br><br>
<a href="#div3">Div 3.</a><br><br>