CSS3：CSSだけで作るタブUI

本題に入る前に簡単な基礎から。
下記のHTMLを前提とします。

<ul class="list">
  <li><input name="r" id="r1" type="radio"/><label for="r1">リスト1</label></li>
  <li><input name="r" id="r2" type="radio"/><label for="r2">リスト2</label></li>
  <li><input name="r" id="r3" type="radio"/><label for="r3">リスト3</label></li>
</ul>

注意としては<input>を<label>の中に入れず、隣接させる点です。

下記CSSで、チェックした<input>に隣接する<label>のスタイルを変えます。

.list input[type=radio]:checked + label {
  background: #ccc;
}

これだけだと何ということないスタイルですが、JSを必要としないスイッチになるので、ようやく本題になりますが下記のようなこともできるようになります。

http://jsdo.it/goto_jp/ujJp

ポイントは下記のセレクタのように、「checkedの隣接の隣接の…」と数珠つなぎにできる点です。

input[type=radio]:checked + label + .contents {}