【JavaScript不要！CSSだけで高機能UI】CSSだけでタブ切り替えBOX

これまでもこのようなCSSでタブ切り替えできるBOXはありました。
ですが、それはやはり<label>～<input type="radio">タグでID指定が必要だったんですよね。
複数設置となると、本当にややこしくて大変でした(^^;)

今回ご紹介するタブ切り替えBOXは、疑似クラス:has() を使用した
「ID指定が必要のないタブ切り替えBOX」です！
※<input type="radio"> を使用するので、name属性だけは指定が必要です。

また、CSSを駆使してちょっとだけフェードのアニメーションもありますので、切り替えが美しいと思います。(｀･ω･´)ゞ

※タブ切り替えBOX、下記サービスでブロック化させていただきます。

HTML と CSS のコードを以下にご紹介いたします。
コピペで使用できます。ご自由に改修していただいてもOKです。
サイト制作の一助になれば、幸いです。