# @scope

> スタイルの適用範囲を特定の要素の部分木に限定するアットルールです。下限（to）も指定でき、「カードの中だけ、ただし埋め込みウィジェットの中は除く」のような範囲指定が可能。BEM的な命名規則に頼らないスコープ管理を実現します。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/at-scope/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/@scope

## 構文

```css
@scope (<scope-start>) [to (<scope-end>)] { <rules> }
```

## ブラウザ対応

- Baseline 新しく利用可能（2025年12月に全主要ブラウザ対応）
- Chrome 118+ / Firefox 146+ / Safari 17.4+ / Edge 118+

## コード例

### 例1: .card配下のimgだけに適用（:scopeはカード自身）

```css
@scope (.card) {
  img {
    border-radius: 8px;
  }
  :scope {
    padding: 1rem;
  }
}
```

### 例2: 下限（ドーナツスコープ）で埋め込み領域を除外

```css
/* .content内、ただし.embedの中は対象外 */
@scope (.content) to (.embed) {
  p {
    line-height: 1.9;
  }
}
```

## TIPS

同じ詳細度なら「スコープ根に近い方が勝つ」近接性ルールが加わるのが@scopeの特徴です。テーマの入れ子（ライトの中にダークカードがある等）で威力を発揮します。

## よくある間違い

スコープ内のセレクタは自動で範囲限定されますが、詳細度自体は変わりません。またスコープ根自身を対象にするには:scopeを使います（@scope (.card) { .card {...} }とは書かない）。

## AIがよく間違えるポイント

AIはスタイルの衝突回避にBEM命名やCSS Modulesを前提としがちで、ネイティブの@scopeを提案に含めないことが多いです。AIの知識では「Chrome限定」と古い場合がありますが、Firefoxも2025年末に対応しBaseline入りしています。近接性（proximity）という新しい競合解決ルールはAIの説明が不正確になりやすい領域です。

## AIへの依頼文例

- このBEM命名だらけのカードコンポーネントCSSを@scopeでスコープ管理する形に書き換えて
- 記事本文のタイポグラフィを、埋め込みウィジェット内を除外して適用したい。@scopeのto構文で実装して
- ネストしたライト/ダークテーマの上書きを@scopeの近接性ルールで解決できるか検討して

## 関連プロパティ

- [css-nesting](https://www.css-dictionary.com/property/css-nesting.md)
- [cascade-layers](https://www.css-dictionary.com/property/cascade-layers.md)
- [pseudo-has](https://www.css-dictionary.com/property/pseudo-has.md)