How do I add another tab using CSS3? - html

Question

I found an example of CSS tabs here;
I am using the third example "target". However, when I attempted to add a FOURTH tab, everything breaks down, even with the first 3 (working) tabs. My attempt is here;
I believe the following original CSS codes need to be adjusted, which I do not know how to make sense of;
/* Target Tabs */
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(3)
{
display: block;
}
What do I need to adjust to get the FOURTH tab to function properly?

Answer 1

This works:
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ span:nth-of-type(3):not(:target) ~ span:nth-of-type(4):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(4):target ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(3):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(3),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(4) {
display: block;
}
Sample fiddle

Answer 2

By this you can add any number of tabs by just adding in html
HTML
<div class="tabs">
<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 One
</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 Two
</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 Three
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Tab Four</label>
<div class="content">
Tab Four
</div>
</div>
</div>
<-- to add more tabs just copy the .... fully and change its value accordingly. -->
CSS
.tabs {
position: relative;
min-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 ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
DEMO