CSS Radio-Boxes do nothing - html

Question

I´ve got a problem with my Web-Design: I want content box to open when a specific radio button is activated with
input#topic1:checked ~ #content1{
color:yellow;
}
but nothing happens. Rest of code is in this jsfiddle. I bet the answer is really easy but I tried a lot and didn´t found any question which answeres this.
Thanks for any effords
Tim

Answer 1

The problem is that the ~ selector works with siblings that share the same parent, in your case the parent is body but the content divs are inside label, so you should target it like this:
input#topic1:checked ~ label #content1 {
color: yellow;
}
input#topic2:checked ~ label #content2 {
color: yellow;
}
input#topic3:checked ~ label #content3 {
color: yellow;
}
See jsFiddle fork: https://jsfiddle.net/azizn/k8gxzq56/

Answer 2

First you don't have to close input tags as sais #Aziz
Then, I use javascript to do this.
See this fiddle
$(function(){
$("input[type=radio]").on('click', function(){
$('.contentbox').removeClass('yellow');
// get the target link
target = $(this).data('href');
$("#"+target).addClass('yellow');
});
});

Answer 3

Rearranged your code to make it work with CSS only.
.contentbox{
width:100vw;
height:10vw;
}
#content1{
background:#0000FF;
}
#content2{
background:#FF0000;
}
#content3{
background:#00FF00;
}
input#topic1:checked + .content1{
color:yellow;
}
input#topic2:checked + .content2{
color:yellow;
}
input#topic3:checked + .content3{
color:yellow;
}
<input type="radio" name="topic" class="topic_selection, topic1" id="topic1">
<label for="topic1" class="content1">
<div class="contentbox" id="content1">
<h1>Text 1</h1>
</div>
</label>
<input type="radio" name="topic" class="topic_selection" id="topic2">
<label for="topic2" class="content2">
<div class="contentbox" id="content2">
<h1>Text2</h1>
</div>
</label>
<input type="radio" name="topic" class="topic_selection" id="topic3">
<label for="topic3" class="content3">
<div class="contentbox" id="content3">
<h1>Text3</h1>
</div>
</label>