@scope

構文

@scope アットルールは、 1 つ以上のルールセット（スコープ付きスタイルルールと呼ばれます）を収め、選択した要素に適用するスコープを定義します。 @scope は 2 つの方法で使用することができます。

1. CSS の中における独立したブロックとして。この場合、スコープルートとオプションのスコープリミットセレクターを含む前置部を記述します。これらはスコープの上限と下限を定義します。

   css

   @scope (スコープルート) to (スコープリミット) {
     /* … */
   }
   

2. HTML で <style> 要素の中に記載するインラインスタイルとして。この場合、前置き部は除外され、囲まれたルールセットは自動的に <style> 要素の親要素のスコープになります。

   html

   <parent-element>
     <style>
       @scope {
         /* ルールセット */
       }
     </style>
   </parent-element>
   

   また、インラインの @scope をスコープ制限セレクターと組み合わせることも可能です。例えば、@scope to (スコープリミット) { ... } のようにします。

解説

複雑なウェブ文書には、ヘッダー、フッター、ニュース記事、地図、メディアプレーヤー、広告などの部品が含まれることがあります。複雑さが増すにつれて、これらの部品のスタイル設定を効果的に管理することが重要になり、スタイルを効果的にスコープ化することで、この複雑さを管理することができます。以下の DOM ツリーを考えてみましょう。

body
└─ article.feature
   ├─ section.article-hero
   │  ├─ h2
   │  └─ img
   │
   ├─ section.article-body
   │  ├─ h3
   │  ├─ p
   │  ├─ img
   │  ├─ p
   │  └─ figure
   │     ├─ img
   │     └─ figcaption
   │
   └─ footer
      ├─ p
      └─ img

クラスが article-body である <section> 内の <img> 要素を選択したい場合は、以下のようにします。

• .feature > .article-body > img のようなセレクターを書く方法。しかし、これは高い詳細度を持つため上書きしにくく、また DOM 構造と緊密に結合しています。将来、マークアップの構造が変わったら、CSS を書き直す必要があるかもしれません。
• .article-body img のように、詳細度を下げて書く方法。しかし、これでは section 内の画像をすべて選択してしまいます。

そこで有益なのが @scope です。これを使うことで、セレクターが対象とする要素を正確に定義することができます。例えば、次の例のように単独の @scope ブロックを使用して上記の問題を解決することができます。

@scope (.article-body) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}

スコープルートセレクターである .article-body は、ルールセットが適用される DOM ツリーのスコープの上限を定義し、スコープリミットセレクターである figure は下限を定義します。その結果、クラスが article-body である <section> の中にある <img> 要素のみが選択され、<figure> 要素の中は選択されません。

スコープの上限は包含され、下限は除外されます。この動作を変更するには、いずれかのセレクターを全称子セレクターと組み合わせることができます。例えば、@scope (スコープルート) to (スコープリミット > *) とすると両方の境界が包含型になり、@scope (スコープルート > *) to (スコープリミット) とすると両方の境界が除外型になります。一方、@scope (スコープルート > *) to (スコープリミット > *) とすると、上限は除外型、下限は包含型になります。

article-body クラスを持つ <section> 内の画像をすべて選択したい場合は、スコープリミットセレクターを省略できます。

@scope (.article-body) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}

あるいは、 @scope ブロックを article-body クラスの付いた <section> の中、インラインの <style> 要素の中に記載しすることができます。

<section class="article-body">
  <style>
    @scope {
      img {
        border: 5px solid black;
        background-color: goldenrod;
      }
    }
  </style>

  <!-- ... -->
</section>

@scope ブロック内の :scope 擬似クラス

@scope ブロック内では、:scope 擬似クラスを使用することで、次のようにスコープのルート要素にスタイルを直接適用することができます。

@scope (.feature) {
  :scope {
    background: rebeccapurple;
    color: antiquewhite;
    font-family: sans-serif;
  }
}

@scope ブロック内の :scope については、いつかの注意事項があります。

• :scope はクラスレベルの詳細度を追加します（詳しくは @scope の詳細度を参照してください）。

• スコープリミットは :scope を使用して、スコープリミットとルートとの間の固有の関係要件を指定することができます。例えば、以下のようにします。

  css

  /* :scope の直接の子である場合にのみ、スコープリミットになります。 */
  @scope (.article-body) to (:scope > figure) {
    /* … */
  }
  

• スコープリミットは :scope を使用してスコープルート外の要素を参照することができます。例えば、次のようにします。

  css

  /* figure は :scope が .feature の中にある場合に限りリミットとなる */
  @scope (.article-body) to (.feature :scope figure) {
    /* … */
  }
  

• スコープ付きスタイルルールはサブツリーを除外できません。 :scope + p のような選択はサブツリーの外になるので無効です。

• スコープのルートとリミットはセレクターリストとして定義することも可能で、その場合は複数のスコープが定義されます。次の例では、クラスが article-hero または article-body である <section> 内の <img> にはスタイル設定が適用されますが、 <figure> の中に含まれているものには適用されません。

  css

  @scope (.article-hero, .article-body) to (figure) {
    img {
      border: 5px solid black;
      background-color: goldenrod;
    }
  }
  

@scope の詳細度

@scope ルール内では、単純セレクターと & 入れ子セレクターの両方が、セレクターの先頭に :where(:scope) が付加されたかのように動作します。 :where() が持つ詳細度はゼロであるため、単純セレクターや & に重みは追加されません。詳細度の重みは、セレクターの残りの部分によって決定されます。 例えば、& img セレクターの詳細度は、:where(:scope) img (0-0-1) の詳細度と同等です。

以下のコードブロックにある 2 つの場合において、詳細度は img のみから決まります。

@scope (.article-body) {
  /* img は期待通り、 0-0-1 の詳細度になる */
  img {
    /* … */
  }

  /* & img も 0-0-1 の詳細度になる */
  & img {
    /* … */
  }
}

一方で、:scope を明示的に使用すると、スコープのルートが選択され、クラスレベルの詳細度 (0-1-0) が追加されます。これは、:scope が擬似クラスであるためです。 以下のコードブロックでは、:scope img の詳細度は 0-1-1 となります。

@scope (.article-body) {
  /* :scope img は 0-1-0 + 0-0-1 = 0-1-1 の詳細度になります。 */
  :scope img {
    /* … */
  }
}

@scope の競合の解決方法

@scope は CSS カスケードに新しい基準、スコープの近接性を追加します。これは、 2 つのスコープに競合するスタイル設定がある場合、スコープルートまでの DOM ツリー階層のホップ数が最も少ないスタイルを適用するという状態です。この意味を例で見ていきましょう。

次の HTML スニペットを見てみましょう。異なるテーマのカードが互いに入れ子になっています。

<div class="light-theme">
  <p>明るいテーマのテキスト</p>
  <div class="dark-theme">
    <p>暗いテーマのテキスト</p>
    <div class="light-theme">
      <p>明るいテーマのテキスト</p>
    </div>
  </div>
</div>

テーマの CSS をこのように書くと、問題が発生します。

.light-theme {
  background: #cccccc;
}

.dark-theme {
  background: #333333;
}

.light-theme p {
  color: black;
}

.dark-theme p {
  color: white;
}

一番内側の段落は明るいテーマのカードの中なので、黒く色づけされるはずです。しかし、 .light-theme p と .dark-theme p の両方を対象にしています。 .dark-theme p のルールの方がソースの順番で後に現れるため、そちらが適用され、段落は誤って白に着色されてしまいます。

次のように @scope を使用することで、これを修正することができます。

@scope (.light-theme) {
  :scope {
    background: #cccccc;
  }
  p {
    color: black;
  }
}

@scope (.dark-theme) {
  :scope {
    background: #333333;
  }
  p {
    color: white;
  }
}

これで一番内側の段落は正しく黒く色づけされました。これは、 .light-theme のスコープルートからは DOM ツリーの階層が1階層しか離れておらず、 .dark-theme のスコープルートからは 2 階層しか離れていないためです。したがって、 light スタイルが勝ちます。

形式文法

@scope = 
  @scope <scope-boundaries>? { <block-contents> }  

<scope-boundaries> = 
  [ [ ( <scope-start> ) ]? [ to ( <scope-end> ) ]? ]!  

<scope-start> = 
  <selector-list>  

<scope-end> = 
  <selector-list>  

<selector-list> = 
  <complex-selector-list>  

<complex-selector-list> = 
  <complex-selector>#  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'                |
  '+'                |
  '~'                |
  [ '|' '|' ]        |
  [ / <wq-name> / ]  

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

例

スコープルート内の基本的なスタイル設定

この例では、 2 つの別個の @scope ブロックを使用して、それぞれ .light-scheme と .dark-scheme クラスを持つ要素内のリンクと照合しています。スコープルート自体を選択し、スタイル設定を提供するために :scope を使用していることに注意してください。この例では、スコープルートは <div> 要素であり、それらにクラスが適用されています。

HTML

<div class="light-scheme">
  <p>
    MDN には、<a href="/ja/docs/Web/HTML">HTML</a>、
    <a href="/ja/docs/Web/CSS">CSS</a>、
    <a href="/ja/docs/Web/JavaScript">JavaScript</a>
    に関するたくさんの情報があります。
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN には、<a href="/ja/docs/Web/HTML">HTML</a>、
    <a href="/ja/docs/Web/CSS">CSS</a>、
    <a href="/ja/docs/Web/JavaScript">JavaScript</a>
    に関するたくさんの情報があります。
  </p>
</div>

CSS

div {
  padding: 10px;
}

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

  a {
    color: darkmagenta;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: darkmagenta;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}

結果

上記のコードでは、このように描画されます。

スコープルートとスコープリミット

この例では、先ほど解説の節で説明した DOM 構造に一致する HTML スニペットが指定されています。この構造は典型的な記事の概要を表します。注目すべき主な機能は、 <img> 要素で、構造内の様々なレベルで入れ子になっています。

この例の目的は、 <img> 要素のスタイル設定にスコープルートとリミットを使用し、階層の最上位から開始し、 <figure> 要素内の <img> までしか（そして <img> は含まれない）表示させない方法を示すことです。つまり、ドーナッツスコープを作成する効果があります。

HTML

<article class="feature">
  <section class="article-hero">
    <h2>記事の見出し</h2>
    <img alt="image" src="" />
  </section>

  <section class="article-body">
    <h3>記事の副見出し</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod
      consectetur leo, nec eleifend quam volutpat vitae. Duis quis felis at
      augue imperdiet aliquam. Morbi at felis et massa mattis lacinia. Cras
      pharetra velit nisi, ac efficitur magna luctus nec.
    </p>

    <img alt="image" src="" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <figure>
      <img alt="image" src="" />
      <figcaption>インフォグラフィック</figcaption>
    </figure>
  </section>

  <footer>
    <p>Written by Chris Mills.</p>
    <img alt="image" src="" />
  </footer>
</article>

CSS

* {
  box-sizing: border-box;
}

article {
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid gray;
}

.article-hero,
.article-body,
article footer {
  padding: 20px;
  margin: 10px;
  border: 2px solid lightgray;
}

img {
  height: 100px;
  width: 100%;
  display: block;
  background-color: lightgray;
  color: black;
  padding: 10px;
}

この CSS には、 2 つの @scope ブロックがあります。

• 最初の @scope ブロックは、 .feature のクラスを持つ要素（この場合は外側の <article> のみ）をスコープルートとして定義しており、 @scope を使用して固有の HTML サブセットをテーマにできることを示しています。
• 2 つ目の @scope ブロックもスコープルートを .feature クラスの要素と定義していますが、さらにスコープリミットは figure と定義しています。これにより、格納されたルールセットはスコープルート（この場合は <article class="feature"> ... </article>）内の一致する要素にのみ適用され、子孫の <figure> 要素の中に入れ子になっているものは適用されません。この @scope ブロックには、 <img> 要素を太い黒枠と金色の背景色でスタイル設定する単一のルールセットが格納されています。

/* スコープ化した CSS */

@scope (.feature) {
  :scope {
    background: rebeccapurple;
    color: antiquewhite;
    font-family: sans-serif;
  }

  figure {
    background-color: white;
    border: 2px solid black;
    color: black;
    padding: 10px;
  }
}

/* ドーナッツスコープ */

@scope (.feature) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}

結果

レンダリングされたコードでは、 <figure> 要素（ラベル付けは "My infographic"）内のものを除いて、すべての <img> 要素が太い境界線と金色の背景でスタイル設定されていることに注目してください。

仕様書

ブラウザーの互換性

css.at-rules.scope

css.selectors.nesting.at-scope

関連情報

• :scope
• CSSScopeRule
• 詳細度
• Defining the & selector in a @scope rule - css.oddbird.net (2025)
• Limit the reach of your selectors with the CSS @scope at-rule - developer.chrome.com (2023)