「^=」の意味とは？ ページ内リンクのスムーススクロールやCSSの指定などに使えます‼

「^=」とは?

ページ内リンクのスムーススクロール

  document.querySelectorAll('a[href^="#"]') // aタグのhrefの#から始まるものを全て指定
  .forEach((link) => {
    link.addEventListener("click", function (e) {
      e.preventDefault(); // 本来の処理を無効化
      const targetElement = document.querySelector(link.hash)
      const offsetTo = window.pageYOffset + targetElement.getBoundingClientRect().top -80;
      
      window.scrollTo({
        top: offsetTo,
        behavior: "smooth",
      });
    });
  });

cssの指定に使う

HTML

  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>

CSS

  [class^="box"] {
    width: 100px;
    height: 50px;
  }
  .box-1 {
    background: red;
  }
  .box-2 {
    background: blue;
  }
  .box-3 {
    background: purple;
  }

  .box-1,
  .box-2,
  .box-3 {
    width: 100px;
    height: 50px;
  }
  .box-1 {
    background: red;
  }
  .box-2 {
    background: blue;
  }
  .box-3 {
    background: purple;
  }

まとめ