スタイルの適用範囲を特定の要素の部分木に限定するアットルールです。下限（to）も指定でき、「カードの中だけ、ただし埋め込みウィジェットの中は除く」のような範囲指定が可能。BEM的な命名規則に頼らないスコープ管理を実現します。
@scope (<scope-start>) [to (<scope-end>)] { <rules> }@scope (.card) {
img {
border-radius: 8px;
}
:scope {
padding: 1rem;
}
}.card配下のimgだけに適用（:scopeはカード自身）
/* .content内、ただし.embedの中は対象外 */
@scope (.content) to (.embed) {
p {
line-height: 1.9;
}
}下限（ドーナツスコープ）で埋め込み領域を除外
同じ詳細度なら「スコープ根に近い方が勝つ」近接性ルールが加わるのが@scopeの特徴です。テーマの入れ子（ライトの中にダークカードがある等）で威力を発揮します。
スコープ内のセレクタは自動で範囲限定されますが、詳細度自体は変わりません。またスコープ根自身を対象にするには:scopeを使います（@scope (.card) { .card {...} }とは書かない）。
AIはスタイルの衝突回避にBEM命名やCSS Modulesを前提としがちで、ネイティブの@scopeを提案に含めないことが多いです。AIの知識では「Chrome限定」と古い場合がありますが、Firefoxも2025年末に対応しBaseline入りしています。近接性（proximity）という新しい競合解決ルールはAIの説明が不正確になりやすい領域です。
このBEM命名だらけのカードコンポーネントCSSを@scopeでスコープ管理する形に書き換えて
記事本文のタイポグラフィを、埋め込みウィジェット内を除外して適用したい。@scopeのto構文で実装して
ネストしたライト/ダークテーマの上書きを@scopeの近接性ルールで解決できるか検討して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。