How do CSS radio tabs work? - html

Question

Could someone explain how the last part of the code works? Specifically:
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}
I'm just starting with CSS as a newb and wanted to try to create some interactive CSS tabs; which lead me to look at some existing code out there. Needless to say it has left me quite confused.
Why is [type=radio]:checked needed? It had z-index: 2; inside the brackets but I took that out and the code still works just fine; although when I try and delete [type=radio]:checked all together the code breaks. Why? It has no properties currently.
[type=radio]:checked ~ .content used to be [type=radio]:checked ~ label ~ .content but I took out label and it still works fine. Why was it ever needed?
HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
tab#1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
tab#2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
tab#3
</div>
</div>
</div>
</html>
CSS:
.tabs {
position: relative;
height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}

Answer 1

The last part of your CSS:
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}
This is giving a z-index to the class content. Since only one tab is clicked it is giving a z-index to only one content class and that makes it display. (Since no others have a z-index)
If you want to see how it works then add a z-index to the content class, lets say 10, in your CSS and watch how it gets all screwy. Now since that code is only giving a z-index: 1; it doesn't display correctly since they all have 10 in this example. Now go to the above snidbit of code and put a z-index: 11; and watch how it works correctly. Since only one gets a high z-index: 11; it becomes the displaying one.
If you don't know what the [type=radio]:checked means, it is pertaining to an active state or clicked state for that radio input.
This part of code: [type=radio]:checked ~ label ~ .content is allowing a more distinguished and precise selection of a DOM element. It will work without it because .content is below the radio tag. It will only apply to an element that is 1. input radio > 2. label > 3. .content.
If you also don't know what z-index does then let me know and I'll brake that down.