Tab only css3

Tab with css3

<div id="tab">
	<input type="radio" name="table" id="n1" checked/>
	<label for="n1">Tab 1</label>
	<input type="radio" name="table" id="n2"/>
	<label for="n2">Tab 2</label>
	<input type="radio" name="table" id="n3"/>
	<label for="n3">Tab 3</label>

	<div id="table">
		<div>
			<h3>content for tab 1</h3>
			<p>Some text for tab 1</p>
		</div>
		<div>
			<h3>content for tab 2</h3>
			<p>Some text for tab 2</p>
		</div>
		<div>
			<h3>content for tab 3</h3>
			<p>Some text for tab 3</p>
		</div>
	</div>
</div>

<!--Css3 code for tabs--->

#tab{
	width: 250px;
	margin: 20px;
}
#tab > input{display: none}
#tab > label{
	cursor: pointer;
	display: block;
	float: left;
	padding: 5px 10px;
	background: #ccc;
	margin-right: 5px;
	border-radius: 5px 5px 0 0;
	transition: background-color .8s;
}
#table{
	clear: both;
}
#table > div{
	background: #fff;
	position: absolute;
	width: 250px;
	padding: 15px;
	overflow: hidden;
	height: 150px;
	border-radius: 0 5px 5px 5px;
	opacity: 0;
	transition: opacity 1s;
}
#n1:checked ~ #table > div:nth-of-type(1),
#n2:checked ~ #table > div:nth-of-type(2),
#n3:checked ~ #table > div:nth-of-type(3){
	opacity: 1;
}
#tab > input:checked + label {
	color: #333;
	background: #fff;
}