Селектор :scope появился в 2023 году и служит для определения области действия стилей в CSS.

Если :scope относится к корневому уровню разметки страницы (обычно это блок html), он полностью заменяет :root:

:scope {
  background-color: orange;
}

Использование :scope внутри блока @scope позволит применить стили четко и целенаправленно, опираясь на логику наименований классов

Например, для HTML-кода:

<div class="light">
  <p>
    <a href="#">light</a>
  </p>
</div>

<div class="dark">
  <p>
    <a href="#">dark</a>
  </p>
</div>

можно применить следующие стили:

@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

Подробную информацию также можно изучить на MDN.

Спасибо за внимание.