CSS Reference

@scope

スタイルが適用される範囲を定義する

@scope 規則はスタイルが適用される範囲を定義します。@scope 規則によってドキュメント内からある一部分（特定の要素や class 名を持った要素、あるいはその範囲）を指定することで、セレクタがマッチし、スタイルが適用される範囲を柔軟に絞り込むことが可能です。

@scope 規則の基本的な構文は下記のようになります。

@scope (<scoping root>) to (<scoping limit>) {
  CSS ルールセット
}

<scoping limit> については指定しなくても構いません。その場合は下記のような記述になります。

@scope (<scoping root>) {
  CSS ルールセット
}

あるいは、style 要素内で使用された場合、自動的に style 要素の親要素にスコープされます。

<section>
<!-- この場合、自動的に親となる section 要素内にスコープされる -->
  <style>
    @scope {
      CSS ルールセット
    }
  </style>
</section>

具体的な記述例

例えば、.example という class 名をもつ要素内にスコープしてスタイルを指定したい場合は下記のように記述します。

@scope (.example) {
  /* .example 内の a 要素だけにマッチ */
  a {
    color: red;
  }
}

下記のような HTML 文書があり、.example という class 名をもつ要素内にスコープして img 要素にスタイルを指定しつつも、子要素にある .exclude という class 名をもつ要素内にある img 要素にはスタイルを指定したくないという場合、<scoping limit> を加えて範囲を絞ることができます。

<div class="example">
  <p>
    テキスト
  </p>
  <p>  
    <img src="include-01.jpg" alt="">
  </p>
  <img src="include-02.jpg" alt="">
  <div class="exclude">
    <img src="exclude.jpg" alt="">
  </div >
</div >

@scope (.example) to (.exclude) {
  img {
    border: 1px solid black;
  }
}

:scope 疑似クラス

:scope 疑似クラスは、<scoping root> にマッチしますので、例えば下記のように記述すると、.example に対してスタイルを適用することができます。

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

@scopeのサンプルソース

@scope (.light-scheme) {
  /* .light-scheme 内の a 要素だけにマッチ */
  a { color: darkmagenta; }
}

@scope (.dark-scheme) {
  /* .dark-scheme 内の a 要素だけにマッチ */
  a { color: plum; }
}

@scope (.media-object) {
  /* .media-object 内の .author-image だけにマッチ */
  .author-image { border-radius: 50%; }
}
@scope (.media-object) to (figure) {
  /* .media-object 内の img 要素にマッチするが、img 要素が figure 要素内にある場合はマッチしない */
  img { border-radius: 50%; }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome