【CSS】セレクタの:checkedと~は何をしているか？（間接セレクタ, チルダ, 波線, ～）

CSSを使っていると:checkedや~を使った記述がでてくることがあります。

この2つはセレクタの指定方法の1つでとても便利です。

ここではセレクタの:checkedと~の使い方を実例で解説しています。

:checked

:checkedは疑似クラスの中の1つで、セレクタの後ろにつけて使います。

これをつけると、inputタグのラジオボタンやチェックボックス、selectタグのoptionボタンで、チェックマークが入っていたり、選択状態になっているときのみCSSを適用することができます。

例えば以下のようなチェックボックスがあるとします。

  <section>
    <input type="checkbox" class="menu-btn" id="menu-btn">
    <label for="menu-btn" class="menu-text">ラジオボタンをチェックしてください</label>
  </section>

このときinputタグに対して:checkedでCSSを設定すると、クリックしたときに記述したCSSを適用することができます。

例えば以下のように設定すると、チェックボックスがクリックされたときだけ赤い枠線を表示します。

　　input:checked {
      outline: 2px solid red;
    }

: とは何か？｜疑似クラス

ちなみに、:checkedの冒頭の「:」は疑似クラスと呼ぶものです。疑似クラスとは何かについては下記をご参考ください。

間接セレクタ ~

間接セレクタ ~ の機能

「~」間接セレクタはinputタグの :checkedとlabelタグと合わせてよく使われるものです。

これは、2つのセレクターを結びつけ、 1つ目の要素の後に 2つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべての要素を対象とできる便利な記述です。

なお、正式名称は後続兄弟結合子というらしいです。

基本的な書き方は以下になります。

要素１ ~ 要素２ {スタイル}

inputタグはlabelタグと紐づけることができますが、labelタグはinputタグの中ではなく外に記述します。

<input type="checkbox" id="menu-btn">
<label for="menu-btn">チェックボックスをクリックしてください</label>

このため通常のセレクタの記述 input label{}のようにしてinputタグの中のlabelタグを指定するといったことができません。

このため、inputタグのチェックボックスにチェックを入れたときに（input:checkedの状態）、関連するlabelタグにスタイルを適用したい場合は「~」を使う必要があります。

実例

例えば以下のように、チェックボックスと文章を表示したlabelタグがあるとします。

  <section>
    <input type="checkbox" class="menu-btn" id="menu-btn"><br>
    <label for="menu-btn" class="menu-text">チェックボタンにチェックを入れてください</label>
    <p>①この文章は変化しません</p>
    <p class="menu-text">②これは変化します。</p>
    <p class="menu-text">③これだって変化します。</p>
  </section>
  <section>
    <p class="menu-text">④親が違うと変化しないよ</p>
  </section>

これに対して :checkedを用いてCSSを設定します。

セレクタを.menu-btn:checked ~ .menu-textとすることで、inputタグの後ろにある「class=”menu-text”」を持つすべての要素に対してCSSを適用します。

ただし、親要素が違う場合は対象外となります。

    .menu-btn:checked ~ .menu-text {
      background: red;
      color: white;
    }

ちなみに、上記のCSSで「~」を除外すると機能しなくなります。

class="menu-btn"がついている要素の配下のclass="menu-text"を指定していることになるので当然ですね。

    .menu-btn:checked .menu-text {
      background: red;
      color: white;
    }

間接セレクタ「~」、超便利な代物です。