CSS @scope 规则

定義と使用法

CSS @scope ルールは、特定の DOM 子ツリー内の要素を選択することができます。

この @ ルールを使用して、非常に具体的な選択器を書かずに要素を正確に定位できます。

この @ ルールは、選択器と DOM 構造間の依存関係を減少させます。

インスタンス

例 1

ここでは、2つの独立した @scope ブロックを使用して .ex1 クラスと .ex2 クラス内の <a> 要素をマッチングします。:scope は、選択および設定する範囲自体のスタイルを選択するために使用されます。この例では、クラスが適用された <div> 要素が範囲のルートです：

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

自分で試してみてください

以下のHTMLを確認してください：

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

以下にネストされた<div>要素があります。container/news部分の<h2>と<img>要素にスタイルを設定する場合は、以下の内容を書かなければなりません（@scopeを使用しない場合）：

例2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

自分で試してみてください

使用 @scope ルールを使用すると、複雑なセレクタを書かずに正確に要素を定位できます。以下のように示されます：

例3

ここでは、.containerコンポーネント内の<h2>と<img>要素に対して、.containerを@scopeルールのルート範囲として設定します：

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

自分で試してみてください

@scope ルールは1つ以上のルールセットを含み、以下の2つの方法で使用できます：

• CSS内の独立したブロックとして、この場合、先頭部分が含まれ、範囲のルートとオプションの範囲制限セレクタ（これらは範囲の上下限を定義します）が含まれます。
• HTML内の<style>要素内のインラインスタイルとして、この場合、先頭部分は省略され、含まれるルールセットは自動的に<style>要素の親要素に適用されます。

例4

「甜甜圈範囲」は、祖先ツリーの2つの要素間に位置する要素に対してのみ適用されます。これは例です：

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

自分で試してみてください

CSS文法

@scope (範囲のルート) {
  ルールセット
}

または

/* 甜甜圈範囲 */
@scope (範囲のルート) to (範囲制限) {
  ルールセット
}

ブラウザのサポート

テーブルの数字は、@ルールを完全にサポートする最初のブラウザのバージョンを示しています。