CSSのスコープ付きスタイルを使用すると、特定のスタイルが適用される境界を指定でき、CSSにネイティブな名前空間を作成することができる。
スタイルルールを@scope (セレクタ) { … }という構文で囲むのが基本的な@scopeの構文である。@scopeの(セレクタ)部分にマッチした要素のことをscoping rootという。そして、@scopeのブロック内に書かれたセレクタは、scoping rootの子孫要素に対してのみマッチするようになる。
@scope (main) {
div {
border: 1px dashed black;
}
p {
margin-block: 1em;
}
strong {
color: red;
}
}上記の例では、mainでスコープされた定義の中にdiv, p, strongがセレクタとして用いられている。よって、これらのセレクタはdivやpやstrongなら何でもマッチするわけではなく、mainの子孫であるdiv, p, strongにのみマッチするようになる。
@scopeの特徴的な機能は、スコープの下限を設定できることである。上の例は下限設定機能を使っていないため、@scopeを使わなくても似たようなことが可能である。下限設定機能を使うことで@scopeの本領が発揮される。スコープの下限を設定するには、to構文を用いる。
/* @scope を使う例 */
@scope (main) to (aside.ad) {
div {
border: 1px dashed black;
}
p {
margin-block: 1em;
}
strong {
color: red;
}
}上記の@scopeが表すスコープの範囲は「mainの子孫かつ、その中のaside.adの子孫は除く」となる。これは、木構造で見ると、ルートから末端までの道の間でmainからaside.adまでの間にある要素に対してのみマッチすることを示しているということになる（aside.adが無いパスの場合は、末端までスコープに含まれる）。
このように、toで示された要素はスコープの終端（scoping limit）となり、それより下はスコープの範囲外となる。
