:scope (pseudo-class)

概要

:scopeは、CSSセレクターのスコープの基準となる要素（スコーピングルート）を選択する擬似クラスです。スタイルシートのトップレベルでは:rootと同等ですが、querySelector()のコンテキスト内やCSS @scopeルール内では呼び出し元の要素にマッチします。コンポーネントベースの開発で、スタイルの適用範囲を明確に制限する際に有用です。

対応ブラウザ

基本構文

@scope (.card) {
  :scope {
    border: 1px solid #ddd;
    padding: 16px;
  }
  :scope > h2 {
    margin-top: 0;
  }
}

実務での使いどころ

• スコープ付きスタイルの基準指定

  @scopeルールやquerySelectorのコンテキストで、スコープの起点となる要素自体にスタイルを適用します。

注意点

アクセシビリティ

• :scopeによるスタイルの限定は視覚的な影響のみであり、DOMの構造やアクセシビリティツリーには影響しません。

参考リンク

• MDN Web Docs — :scope (pseudo-class)