お世話になります。
今回の動画で、JavaScriptでshowクラスとhideクラスをつけて、CSSでそれぞれのスタイルを作りました。

  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

.sp-menu #open.hide {
  display: none;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

JavaScriptでこのように書いたshowクラスとhideクラスは、htmlのどこにクラスをつけたことになりますか？

<div class="sp-menu">
        <span class="material-icons hide" id="open">menu</span>
</div>
</header>

<div class="overlay show">
      <span class="material-icons" id="close">close</span>
<nav>

のようにhideクラスはハンバーガーのアイコンタグのspanタグ内に配置されて、showクラスはdivタグのクラスに配置されたことになりますか？　

一つはspanタグ内にクラスを追加して、もう一つはdivタグ内にクラスを追加したように見えるので、場所が少しずれている気がしまして、、、、見当違いな質問でしたら、すみません。どうぞよろしくお願いします。