このコード CSSタブの内容、仕組みがよくわからない

Question

質問したいこと

CSSタブを作りたくて、調べていたところ、このコードを見つけたのですが
1時間ほど触ったのですがよくわからなかったので、質問させていただきました。

CSS部分の意味が、、なんとなく順番などやHTMｌで中身とタブ部分を組み合わせたりしてるんだろうなぁとはわかるんですけど、どういう風に意味してるのかがわからなくて、

該当のソースコード

　.tab .cp_tabpanel {display: none;}
  .tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
  .tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
  .tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
  .tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
  .tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
  .tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6)

HTML部分

　　　　　　　　　　　　　<div class="tab">
                        <input type="radio" name="cp_tab" id="tab1_1">
                        <label for="tab1_1"></label>
                        <input type="radio" name="cp_tab" id="tab1_2">
                        <label for="tab1_2"></label>
                        <input type="radio" name="cp_tab" id="tab1_3">
                        <label for="tab1_3"></label>
                        <input type="radio" name="cp_tab" id="tab1_4">
                        <label for="tab1_4"></label>
                        <hr>
                        <div class="cp_tabpanels">
                           <div id="first_tab01" class="cp_tabpanel">
                           <h2></h2>
                           <p><p>
                           </div>
                           <div id="second_tab01" class="cp_tabpanel">
                           <h2></h2>
                           <p</p>
                           </div>
                           <div id="third_tab01" class="cp_tabpanel">
                           <h2></h2>
                           <p></p>
                           </div>
                           <div id="force_tab01" class="cp_tabpanel">
                           <h2></h2>
                           <p></p>
                           <ul>

Comments

[new1ro]

・HTML側のソースコードの追記があると、回答を得やすいと思います。

.tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6)

↑上記のセレクタによって指定されるCSSの内容も追記してほしいです。

[sony]

わかりました <div class="tab">
<input type="radio" name="cp_tab" id="tab1_1">
<label for="tab1_1"></label>
<input type="radio" name="cp_tab" id="tab1_2">
<label for="tab1_2"></label>
<input type="radio" name="cp_tab" id="tab1_3">
<label for="tab1_3"></label>
<input type="radio" name="cp_tab" id="tab1_4">
<label for="tab1_4"></label>
<hr>
<div class="cp_tabpanels">
<div id="first_tab01" class="cp_tabpanel">
<h2></h2>
<p>
</div>
<div id="second_tab01" class="cp_tabpanel">
<h2></h2>
<p</p>
</div>
<div id="third_tab01" class="cp_tabpanel">
<h2></h2>
<p></p>
</div>
<div id="force_tab01" class="cp_tabpanel">
<h2></h2>
<p></p>
<ul>

[sony]

これからは事前に書いておきます、ありがとうございます

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[sony]

ありがとうございます、コードブロックで囲ませていただきました

[kei344]

バッククオート3つ（```）の前後には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
また、コードブロックの開始部分を「```HTML」「```JavaScript」にすると言語にあわせたコードハイライトも利用出来ます。

[sony]

ありがとうございます！　コードハイライトを使ってみました、これであってますか？

[kei344]

あってます、編集ありがとうございます。質問について、今はどの部分がわかりませんか？「質問するときのヒント」を読んでより具体的に「わからない部分」を見つけてみてください。

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips

[sony]

:nth-child(3):checke
などのこの数字の意味がわらなくて。。

[kei344]

私が提示した「セレクタ」については読みましたか？:nth-childも掲載されていますよ。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

Answer 1

推測で回答してみます。

.tab .cp_tabpanel {display: none;}
.tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) {
  display: block; /* おそらくこうなっている */
}

HTMLのつくりとして、

<div class="tab">
  <input><!-- 1番目、first-child -->
  <div></div>
  <input><!-- 3番目、:nth-child(3) -->
  <div></div>
  <input><!-- 5番目、:nth-child(5) -->
  <div></div>
  ...
  <input><!-- 11番目、:nth-child(11) -->
  <div></div>

  <div class="cp_tabpanels">
    <div class="cp_tabpanel">コンテンツ</div><!-- 1番目、first-child -->
    <div class="cp_tabpanel">コンテンツ</div><!-- 2番目、:nth-child(2) -->
    <div class="cp_tabpanel">コンテンツ</div><!-- 3番目、:nth-child(3) -->
    ...
    <>
  </div>
</div>
<div>

Comments

[sony]

そうですそうです、そのCSS部分の意味が、どういう風に意味してるのかがわからなくて、、なんとなく順番などやHTMｌで中身とタブ部分を組み合わせたりしてるんだろうなぁとはわかるんですけど、、、

Answer 2

このあたりをみてください。
チェックされたinput要素とその後ろにおいてある.cp_tabpanelsの何番目の子要素とを紐付けています。

【一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator

【:checked - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:checked

【CSS セレクター - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

【CSSのセレクタとは？覚えておきたい25種類と書き方】
https://saruwakakun.com/html-css/reference/selector