Simple CSS only tabs

Simple CSS only tabs

by humanzing

HTML

<input type="radio" name="tab" id="tab-A" checked="">
<input type="radio" name="tab" id="tab-B">

<label class="tab-link" for="tab-A">Limit</label>
<label class="tab-link" for="tab-B">Market</label>
<article class="tab">
	Tab A content
</article>
<article class="tab">
	Tab B content
</article>

CSS

input { 
	display: none;
}

.tab-link {
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	display: block;
	float: left;
	width: 50%;
	padding: 15px 0;
	background: #eee;
}

article.tab {
    padding: 20px;
    background: #ddd;    
}

#tab-B:not(:checked) ~ label:nth-of-type(1) { /* Style tab one selected */ 
	background: #ddd;
}

#tab-B:checked ~ label:nth-of-type(2) { /* Style tab two selected */ 
	background: #ddd;
}

.tab {
	clear: both;
	display: none;
}

input:nth-of-type(2):not(:checked) ~ .tab:nth-of-type(1),
input:nth-of-type(2):checked ~ .tab:nth-of-type(2)
{
  display: block;
}