ハンバーガーメニューのバーが片方だけスタイルが当たらなかった件について

  <button id="js-drawer-icon" class="header__open drawer-icon">
    <span class="dot">
      <span class="drawer-icon__dot"></span>
      <span class="drawer-icon__dot"></span>
    </span>
      <span class="drawer-icon__bar"></span>
      <span class="drawer-icon__bar"></span>
  </button>

上記のような感じでspanタグを用いてbarを指定。

&.is-checked {
    .drawer-icon__bar {
        &:nth-of-type(1) {
            transform: translateY(8px) rotate(-63deg);
            width: 41px;
            top: -4px;
            left: 17px;
            background-color: #fcfcfc;
            transition-delay: 0.6s, 0s;
            transition-duration: 0.3s, 0.3s;
            transition-property: transform, background-color;
        }

        &:nth-of-type(2) {
            transform: translateY(-8px) rotate(63deg);
            width: 41px;
            background-color: #fcfcfc;
            transition-delay: 0.6s, 0s;
            transition-duration: 0.3s, 0.3s;
            transition-property: transform, background-color;
        }
    }
}

上記コードにて.drawer-icon__barにスタイルを当てようと思ったのですが、片方のbarにしかスタイルが反映されませんでした。。。

＜結論＞
HTMLの構造がよろしくありませんでした😂

    <span class="bar">
      <span class="drawer-icon__bar"></span>
      <span class="drawer-icon__bar"></span>
    </span>

.drawer-icon__barをspanタグで囲むことで解決！
そもそも&:nth-of-typeは親要素から見て「何番目の子要素に」スタイルを当てるというものだったので、親要素が抜けてたら使えないのも当然でした😇

自分の備忘録として残しておきます