結合子

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

結合子の働き

半角スペース

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

~

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

+

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

>

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

    <input type="checkbox" id="hamburger"><!--入力 -->
      <p>asd</p>
    <label for="hamburger"><!--入力用の図形の作成位置 -->
      <p>bsd</p>
      <div id="container" class="circle icon"><!--入れ物 -->
        <span class="bar top"></span> <!--線 上 -->
        <span class="bar middle"></span> <!--線 中--> 
        <span class="bar bottom"></span><!--線 下-->
      </div>
    </label>
    CSS 
    #hamburger:checked ~ label .top{
        transform: rotate(45deg);
        top   : 48%;}/*topを45度にします。*/
    #hamburger:checked + label .middle{
        opacity:  0;}/*middleをみえなくします。*/
    #hamburger:checked + label .bottom{
        transform: rotate(-45deg);
        top   : 48%;}/*bottomを-45度にします。*/
  

実行結果

asd

032ハンバーガ2
033ハンバーガ3_9 目次, 033ハンバーガ3_7
034ハンバーガ4