CSSだけでサイズ可変・スマホ対応のタブレイアウト

###前提
こちらのページを参考にcssのみでタブ切り替えを制作中です。

▼CSSだけでサイズ可変・スマホ対応のタブレイアウト
http://www.webdlab.com/labs/tab-5/

タブは2つのみ必要で、
コードをそのまま使って、数を減らすとそこまではうまくいきます。

###実現したいこと

このコードを変えて実現したいことは以下の通りです。

こちらのタブの部分を、
tab5-1とtab5-2で色を変えたいと思ってます。

例えば
tab5-1は、checked時：red、ホバー時：pink
tab5-2は、checked時：blue、ホバー時：skyblue

など。

上記が不可能であれば、
ホバー時はtab5-1、tab5-2 共有でもかまいません。

###該当のソースコード

[HTML]
<div class="tab5">
	<div class="tab-content">
		<input id="tab5-1" type="radio" name="tab5" checked>
		<label for="tab5-1">1</label>
		<input id="tab5-2" type="radio" name="tab5">
		<label for="tab5-2">2</label>
		<div id="tab5-b1">
			<p>コンテンツ1</p>
		</div><!--tab5-b1-->
		<div id="tab5-b2">
			<p>コンテンツ2</p>
		<p>コンテンツ2</p>
		</div><!--tab5-b2-->
</div><!--tab-content-->
</div><!--tab5-->

[CSS]
.tab5 {
	width: 100%;/*横幅はここで設定します。100%にすれば可変になります。*/
	min-width: 300px;
	margin: 0 auto;
}
.tab5 .tab-content {
	margin: 0 10px;
}
.tab5 label {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.tab5 label {
	display: inline-block;
	width: 40px;
	padding: 3px 10px;
	cursor: pointer;
	background: #ddd;
	color: #777;
	margin-right: -2px;
}
.tab5 label:hover {
	background: #eee;
}
.tab5 input:checked + label {
	background: #9fb7d4;
	color: white;
	padding: 5px 10px 3px 10px;
}
.tab5 input {
	display: none;
}
.tab5 #tab5-b1,
.tab5 #tab5-b2{
	display: none;
	padding: 10px;
}
.tab5 #tab5-1:checked ~ #tab5-b1,
.tab5 #tab5-2:checked ~ #tab5-b2 {
	display: block;
	border: 1px solid #9fb7d4;
}

class名を振るなどの方法などを検討し、
その他いろいろ調べたのですが、どうしても突破口が見つかりません。

お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

HTMLはできるだけそのままで、CSSをこのように変更するといかがでしょう。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="css1.css">
7</head>
8<body>
9<div class="tab5">
10    <div class="tab-content">
11        <input id="tab5-1" type="radio" name="tab5" checked>
12        <label for="tab5-1">1</label>
13        <input id="tab5-2" type="radio" name="tab5">
14        <label for="tab5-2">2</label>
15        <div id="tab5-b1">
16            <p>コンテンツ1</p>
17        </div><!--tab5-b1-->
18        <div id="tab5-b2">
19            <p>コンテンツ2</p>
20            <p>コンテンツ2</p>
21        </div><!--tab5-b2-->
22    </div><!--tab-content-->
23</div><!--tab5-->
24</body>
25</html>

CSS
1@charset "UTF-8";
2
3.tab5 {
4    width: 100%; /*横幅はここで設定します。100%にすれば可変になります。*/
5    min-width: 300px;
6    margin: 0 auto;
7}
8
9.tab5 .tab-content {
10    margin: 0 10px;
11}
12
13.tab5 label {
14    display: inline-block;
15    margin: 0;
16    padding: 0;
17}
18
19.tab5 label {
20    display: inline-block;
21    width: 40px;
22    padding: 3px 10px;
23    cursor: pointer;
24    background: #ddd;
25    color: #777;
26    margin-right: -2px;
27}
28
29/* ここから変更した箇所 */
30
31.tab5 label[for="tab5-1"]:hover {
32    background: pink;
33}
34
35.tab5 label[for="tab5-2"]:hover {
36    background: skyblue;
37}
38
39#tab5-1:checked + label[for="tab5-1"] {
40    background: red;
41    color: white;
42    padding: 5px 10px 3px 10px;
43}
44
45#tab5-2:checked + label[for="tab5-2"] {
46    background: blue;
47    color: white;
48    padding: 5px 10px 3px 10px;
49}
50
51/* ここまで変更した箇所 */
52
53.tab5 input {
54    display: none;
55}
56
57.tab5 #tab5-b1,
58.tab5 #tab5-b2 {
59    display: none;
60    padding: 10px;
61}
62
63.tab5 #tab5-1:checked ~ #tab5-b1,
64.tab5 #tab5-2:checked ~ #tab5-b2 {
65    display: block;
66    border: 1px solid #9fb7d4;
67}