Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

:scope (pseudo-class)

:scope は CSS の擬似クラスで、セレクターが選択する対象の参照点である要素を表します。

css

/* スコープとなる要素を選択 */ :scope { background-color: lime; }

どの要素が :scope に一致するかは、それが使用されるコンテキストによって変わります。

スタイルシートのルートレベルで使用する場合、 :scope は :root と等価であり、通常の HTML 文書内の <html> 要素に一致します。

@scope ブロックの中で使用した場合、 :scope はブロックの定義するスコープのルートに一致します。これは @scope ブロック自身からスコープのルートにスタイル設定を適用する方法を提供します。

DOM API 呼び出し（querySelector(), querySelectorAll(), matches(), Element.closest() など）で使用した場合、 :scope はメソッドを呼び出した要素を選択します。

擬似クラススコープ

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:scope`	27	79	32	7	27	7
`dom api` 「querySelector()」や「querySelectorAll()」などの DOM API でのサポート	27	79	32	7	27	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS sco-p withcard demo.

CSS nestedsco-p demo.

CSS sco-p. boundary demo.