結合子
" "半角スペース,~,+,>
結合子の働き
- 半角スペース
- 子孫結合子,指定されたセレクタの子孫要素
- ~
- 兄弟結合子,共通の親要素の後述の要素
- +
- 隣接結合子,直後に記述された隣接要素
- >
- 子結合子,指定された要素の子要素
プログラム
<input type="checkbox" id="hamburger"><!--入力 -->
<p>隣接</p>
<p class="bar top">上</p>
<label for="hamburger"><!--入力用の図形の作成位置 -->
<p class="bar middle">中</p>
<div>
<p class="bar bottom">下</p>
</div>
</label>
実行結果
ここをチェック
隣接
#hamburger:checked + p{隣接
上◆
#hamburger:checked ~ p{兄弟
「隣接」と「上」は兄弟なので"~赤"しかし,「隣接」は隣接なので"+緑",
「中」と「下」は子孫なので"半角スペース青",「中」はlabelの子なので">"ピンク"。
#hamburgerつまり,IDがhamburgerのinputタグには子孫はないので"+"隣接または"~"兄弟の要素を使用します。