CSS3の間接セレクタ「~」を活用しよう！

2019年10月9日プログラミング

こんにちは、水珈琲（@mizucoffee）です。

今回は、CSS3で実装された「~」（間接セレクタ）というとてつもなく強力なセレクタを紹介します！

このセレクタが使えるようになると、今までCSSでは出来なかったような表現が可能になります。

Contents

1. 「~」セレクタってなんだ？
- 1.1. 具体例
2. なにが嬉しいの？
3. :checkedの使い方を確認しよう
4. アコーディオンメニューを作ってみよう
5. まとめ

「~」セレクタってなんだ？

「~」セレクタは「S1 ~ S2」と表記して使用します。

S1要素より後ろにある、同じ階層のS2要素全てに合致します。

具体例

#main ~ .sub

とした場合、下の図の赤い文字の部分が該当します。

body
 │
 ├ div#main
 ├ div.sub
 ├ div.main
 ├    └ div.sub
 └ div.sub

div.mainの中にあるdiv.subは、div#mainと同じ階層ではないので該当しません。

See the Pen "~" Example by Mizucoffee (Ritsuki Goto) (@mizucoffee) on CodePen.

なにが嬉しいの？

一見、あまり使いみちの無いセレクタのように思えます。

しかし、:checkedというセレクタを併用すると今までJavaScriptでしか実現できなかったメニュー等がCSSだけで実装できるようになります。

:checkedの使い方を確認しよう

S:checked疑似クラスセレクタはSに該当するチェックボックス、ラジオボタン、オプションボタンが有効な場合に合致するセレクタです。

See the Pen S:checked by Mizucoffee (Ritsuki Goto) (@mizucoffee) on CodePen.

アコーディオンメニューを作ってみよう

それでは、~セレクタと:checkedセレクタを使ってアコーディオンメニューを作ってみましょう。

開閉する機構を作ろう

まずは必要になる要素を書いていきましょう。

状態管理用のチェックボックス
内容（隠しておく要素）

チェックボックスにチェックが入っているかどうかを見て内容を開閉するので、必ず内容より手前に配置してください。

<input type="checkbox" id="state">
<div class="content">
    Content<br>
    Content<br>
    Content<br>
    ...
</div>

それではCSSを書いていきましょう。

先程説明した~セレクタと:checked疑似クラスセレクタを使用します。

.content {
    display: none;
}
#state:checked ~ .content {
    display: block;
}

すると、以下のような結果になるはずです。

チェックボックスをチェックしてみましょう。.contentが表示されるはずです。

See the Pen ~ Selector by Mizucoffee (Ritsuki Goto) (@mizucoffee) on CodePen.

ボタンっぽくしよう

大元の部分は実装できました。しかしチェックボタンのままというのも寂しいですよね。

というわけで次はボタンっぽい感じのデザインにしてみましょう。

ラベルを作り、checkboxをhiddenにしました。

<label for="state">
    <div class="button">Button</div>
</label>
<input type="checkbox" id="state" hidden>
<div class="content">
    Content<br>
    Content<br>
    Content<br>
    ...
</div>

ついでにCSSもざっくり整えておきます。

.button {
    background: #ccffff;
    cursor: pointer;
    font-size: 20pt;
    padding: 16px;
}
.button:hover {
    opacity: 0.7;
}
.content {
    display: none;
    background: #ffffcc;
}
#state:checked ~ .content {
    display: block;
}

See the Pen Accordion by Mizucoffee (Ritsuki Goto) (@mizucoffee) on CodePen.

いい感じになってきましたね。

アニメーションをつけよう

いきなり現れるとユーザーもびっくりしてしまうので、いい感じにぬるっと現れるアニメーションも付けてしまいましょう。

アニメーションなのでCSSだけをいじればOKですね。

.button {
    background: #ccffff;
    cursor: pointer;
    font-size: 20pt;
    padding: 16px;
    width: 500px;
}
.button:hover {
    opacity: 0.7;
}
.content {
    background: #ffffcc;
    padding: 0 16px;
    width: 500px;
    overflow: hidden;
    max-height: 0;
    transition: all 1s ease-in-out;
}
#state:checked ~ .content {  
    max-height: 100px;
    padding: 16px;
}

See the Pen Accordion animation by Mizucoffee (Ritsuki Goto) (@mizucoffee) on CodePen.

そのまま使えるデザインではありませんが、これをサクッと作れる力があればCSSでの表現が広がるはずです。