【html,css】cssだけを使ってタブで表示切り替えを実装する方法

inputタグのradio属性を使ってタブの切り替え

HTML部分

inputタグのradio属性を利用してタブの切り替えボタンを用意
radioボタンはcssで隠す

<div class="tabs_contents">
	<!-- ↓タブの部分 -->
    <input id="id01" type="radio" name="tab" checked>
    <label for="id01">タブ01</label>
    <input id="id02" type="radio" name="tab">
    <label for="id02">タブ02</label>
    <input id="id03" type="radio" name="tab">
    <label for="id03">タブ03</label>
	<!-- ↓コンテンツの部分 -->
    <div class="content" id="id01_content">
        「タブ01」と紐づいているよ
    </div>
    <div class="content" id="id02_content">
        「タブ02」と紐づいているよ
    </div>
    <div class="content" id="id03_content">
        「タブ03」と紐づいているよ
    </div>
</div>

cssの間接セレクタ「~」を使って条件分岐

CSS部分

間接セレクタ「~」を使って現在checkedされてるinputタグと表示したいコンテンツを紐づけてる

/*ラジオボタン消す*/
input[name="tab"] {
  display: none;
}
/*コンテンツを非表示*/
.content {
  display: none;
}
/*「間接セレクタ」を使って選択されてるタブに紐づくコンテンツを表示*/
#id01:checked ~ #id01_content,
#id02:checked ~ #id02_content,
#id03:checked ~ #id03_content {
  display: block;
}
/*選択されてるタブに色付け*/
.tabs_contents input:checked + label {
  background-color: #000;
  color: #fff;
}

注意：cssの間接セレクタ「~」には問題がある

inputボタン（タブ）と表示を切り分けるコンテンツが同じ階層にあればなんの問題はないんだけど階層が異なると動かなくなる

テスト：
表示切替したいコンテンツをdiv.parentで囲ってみた

//　〇動く
(css)
#id01:checked ~ .parent #id01_content,
…
(html)
<input id="id01" type="radio" name="tab" checked>
<label for="id01">タブ01</label>
…
<div class="parent">
	<div class="content" id="id01_content">
	    「タブ01」と紐づいているよ
	</div>
	…
</div>

テスト：
切り替え用のタブをdiv.parentで囲ってみた

//　×動かない
(css)
.parent #id01:checked ~ #id01_content,
…
(html)
<div class="parent">
	<input id="id01" type="radio" name="tab" checked>
	<label for="id01">タブ01</label>
	…
</div>
<div class="content" id="id01_content">
    「タブ01」と紐づいているよ
</div>
…

切り替えタブ用のinputタグを基点にしてるからdiv.parentの外にあると違う階層って認識なのか動かなくなる
cssは下るのはできても親要素（上）に戻ることは今のところできないみたいだからタブとコンテンツをそれぞれdivタグとかで囲んで装飾したかったらおとなしくjquery使った方がよさそう