CSSでのハンバーガーボタン（ハンバーガーメニュー）実装

Question

前提・実現したいこと

書籍を使ってCSSの勉強をする過程で
理解できない箇所があり、教えていただきたいです。

発生している問題・エラーメッセージ

ハンバーガーボタンのクリックでナビゲーションの表示を行うコードがあるのですが、
CSSの下記の部分で".nav"を削るとナビゲーションが表示されなくなります。
これはなぜなのでしょうか？

<nav>タグについては"display: none"などの非表示の指定はしていないので、 ハンバーガーボタンがクリックされたタイミングで再度表示する指定をする必要はないと思いました。

.nav-toggle:checked ~ .nav .nav-list{
  display: block;
}

該当のソースコード

<header class="header">
<!-- （ヘッダーを記述する） -->
  <!-- ロゴ画像 -->
  <h1 class="logo">
    <a href="./index.html"><img src="img/logo.svg" alt="Aqua"></a>
  </h1>
  <!-- ハンバーガーボタン -->
  <input type="checkbox" name="navToggle" id="navToggle" class="nav-toggle">
  <label for="navToggle" class="btn-burger"></label>
  <!-- ナビゲーション -->
  <nav class="nav">
    <ul class="nav-list">
      <li>ホーム</li>
      <li><a href="guide/index.html">営業案内</a></li>
      <li><a href="contact/index.html">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

/* ハンバーガーボタン */
.nav-toggle{
  display: none;
}

.btn-burger{
  display: block;
  position: absolute;   /* .heightが基準 */
  top: 5px;
  right: 10px;
  height: 44px;
  width: 44px;
  z-index: 2;
  background: url(../img/burger.svg) center center / 35px 20px no-repeat;
  cursor: pointer;
}

.nav-toggle:checked ~ .btn-burger{
  background: url(../img/close.svg) center center / 26px 26px no-repeat;
}

.nav-toggle:checked ~ .nav .nav-list{
  display: block;
}

/* ナビゲーション */
.nav{
  background: url("../img/nav_bg.png") center center / cover no-repeat;
  padding-top: 10px;
}

.nav-list{  
  display: none;
  margin: 0;
  padding-bottom: 10px;
}

.nav li{
  padding: 10px;
}

.nav a{
  color: #fff;
}

Answer 1

~は一般兄弟結合子と呼ばれ、兄弟関係であることを示します。
一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

.nav-toggle:checked ~ .nav .nav-listは「.nav-toggle:checked の兄弟である .nav の子孫である .nav-list」という意味です。
.nav-toggle:checked ~ .nav-listは「.nav-toggle:checked の兄弟である .nav-list」という意味です。.nav-list は .nav-toggle の兄弟ではないので、そのような要素は存在しません。

つまり、.navを削ると意味が変わることが原因です。

Comments

[nano_creator]

回答ありがとうございます！

一般兄弟結合子という名称すら知らなかったので、大変勉強になりました。
ほかに、子孫結合子、子結合子、隣接兄弟結合子というものもあるのですね。

今回の例だと、一般兄弟結合子と子孫結合子を組み合わせたものということですね。
子孫結合子は名称は知りませんでしたが、使い方は知っていたので、すんなり理解できました。

調べるにしてもどのワードで検索するべきかすらわからなかったので、本当にありがとうございました！

[Lhankor_Mhy]

お役に立てたようで何よりです。

「結合子」は、CSS2の時代は「セレクタ」と呼ばれていたので、「一般兄弟結合子」よりも「兄弟セレクタ」や「間接セレクタ」の方が通りがいいかもしれません。

[nano_creator]

助かりました。ありがとうございます。
確かに書籍には、「子孫セレクタ」「関節セレクタ」と記載されていました。

追加で疑問に思ったのですが、
「.nav-toggle ~ .nav .nav-list:checked 」もNGな理由をご存じでしたら教えていただきたいです。

「.footer-nav-list li:first-child」は正しく適応されているのですが、
上記がNGなのは、一般兄弟結合子が含まれているからなのでしょうか？

関節セレクタの場合は、先頭のタグ記述後に疑似クラスの指定が必要で、
子孫セレクタであれば終端のタグ記述後に疑似クラスを指定するとのことでしょうか？

もしご存じであれば教えていただきたいです。

[Lhankor_Mhy]

:checked は疑似クラスの一つで、チェックボックスやラジオボタンで「チェックされているもの」を表します。疑似クラスは通常のクラスセレクタと同様に、要素に対してかかります。

ですので、
「.nav-toggle ~ .nav .nav-list:checked」は、.nav-toggle の兄弟である .nav の子孫である .nav-list でチェックされているもの、という意味になります。
.nav-list はチェックボックスやラジオボタンではないので、チェックされているものではありえないので有効にはならないです。

[nano_creator]

お答えいただきありがとうございます！

なるほどです。
意味を考えるとすごく納得できました。
疑似クラスをどこに記述するかではなく、どの要素に対して疑似クラスがかかっているかを考える必要があるのですね。

追加質問にも親切にありがとうございました！！