結合子

" "半角スペース,~,+,>

結合子の働き

半角スペース

子孫結合子,指定されたセレクタの子孫要素

~

兄弟結合子,共通の親要素の後述の要素

+

隣接結合子,直後に記述された隣接要素

>

子結合子,指定された要素の子要素

プログラム

    <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> 
CSS
#hamburger:checked ~ p{/**/
  color: #f77;}
#hamburger:checked + p{/**/
  color: #7f7;}
#hamburger:checked ~ label p{/**/
  color: #77f;}
#hamburger:checked ~ label > p{/**/
  color: #d5d;}  

実行結果

隣接

上◆