大規模な範囲をタブで、表示非表示を切り替えたい

HTML,CSSで、タブにより大規模な範囲の表示非表示を切り替えたいです。
例えばテスト1を選択した際、tomos1で囲んでいる箇所が表示され、テスト2を選択した際非表示になるようにしたいです。
下記のコードではdivタグがsection class="about"の箇所までしか認識されないです。
divタグってSectionタグを跨げないのでしょうか・・・どうしましょう・・・。

HTML
1  <section class="about">
2      <div class="tabs">
3        <input id="want1" type="radio" name="tab_item" checked>
4        <label class="tab_item" for="want1">テスト1</label>
5        <input id="want2" type="radio" name="tab_item">
6        <label class="tab_item" for="want2">テスト2</label>
7
8<div class="temos1">
9          <div class="toras">
10            <p>コンテンツ内容<br>
11              コンテンツ内容</p>
12          </div>
13      </section>
14  <section class="temos2">
15            <p>コンテンツ内容</p>
16  </section>
17  <section class="temos3">
18            <p>コンテンツ内容</p>
19  </section>
20      <section class="temos4">
21            <p>コンテンツ内容</p>
22  </section>  
23</div>

CSS
1.tabs {
2  /*ラジオボタンを全て消す*/
3  input[name="tab_item"] {
4    display: none;
5  }
6  /*タブ切り替えの中身のスタイル*/
7  .temos1 {
8    display: none;
9    padding: 40px 40px 0;
10    clear: both;
11    overflow: hidden;
12  }
13  #want1:checked ~ .temos1 { display: block; }
14  #want2:checked ~ #container2 { display: block; }

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

回答2件

ベストアンサー

HTMLの開始タグと終了タグの対応がおかしいです。

また、CSSのセレクタ#container2に対応するidの要素がありません。

.temos1以外の要素を#container2で指定したいとするなら、HTMLは下記のようにします。

html
1<section class="about">
2  <div class="tabs">
3    <input id="want1" type="radio" name="tab_item" checked>
4    <label class="tab_item" for="want1">テスト1</label>
5    <input id="want2" type="radio" name="tab_item">
6    <label class="tab_item" for="want2">テスト2</label>
7
8    <div class="temos1">
9      <div class="toras">
10        <p>コンテンツ内容1<br>
11          コンテンツ内容1</p>
12      </div>
13    </div>
14    <div id="container2">
15      <div class="temos2">
16        <p>コンテンツ内容2</p>
17      </div>
18      <div class="temos3">
19        <p>コンテンツ内容3</p>
20      </div>
21      <div class="temos4">
22        <p>コンテンツ内容4</p>
23      </div>
24    </div>
25  </div>
26</section>

あと、CSSもおかしいですが、ひょっとしてSCSSですか。
SCSSなら、下記で
「テスト1」クリックで.temos1表示、
「テスト2」クリックでそれ以外を表示、
という動作になります。

scss
1.tabs {
2  /*ラジオボタンを全て消す*/
3  input[name="tab_item"] {
4    display: none;
5  }
6  /*タブ切り替えの中身のスタイル*/
7  .temos1 {
8    display: none;
9    padding: 40px 40px 0;
10    clear: both;
11    overflow: hidden;
12  }
13  #container2 {
14    display: none;
15  }
16  #want1:checked ~ .temos1 { display: block; }
17  #want2:checked ~ #container2 { display: block; }
18}

CSSなら、

css
1.tabs input[name="tab_item"] {
2  display: none;
3}
4.tabs .temos1 {
5  display: none;
6  padding: 40px 40px 0;
7  clear: both;
8  overflow: hidden;
9}
10.tabs #container2 {
11  display: none;
12}
13.tabs #want1:checked ~ .temos1 {
14  display: block;
15}
16.tabs #want2:checked ~ #container2 {
17  display: block;
18}