@scopeとは
@scopeはCSSの新しい機能で、セレクタの適用範囲を明示的に設定することができます。
これにより、特定の範囲内の要素に対してのみスタイルを適用可能になり、より構造化されたスタイルシートの作成ができます。
@scopeを使わない場合
例えば以下のようなHTMLとCSSがあるとします。
<div class="red">
<p>red</p>
<div class="blue">
<p>blue</p>
<div class="red">
<p>red</p>
</div>
</div>
</div>
.red {
background: pink;
}
.red p {
color: red;
}
.blue {
background: cyan;
}
.blue p {
color: blue;
}
すると以下のような結果になります。
red
blue
red
見ての通り、最後のredが青文字になっています。
これはCSSでは詳細度が同じ場合は最後に適用されるものが反映されるからです。
仮に.redと.blueの順番を変えると今度は以下のようになります。
.blue {
background: cyan;
}
.blue p {
color: blue;
}
.red {
background: pink;
}
.red p {
color: red;
}
red
blue
red
CSSコードの最後に「.red p」が書かれているので、すべてに「color: red;」が適用されています。
@scopeを使った場合
前述のコードを@scopeに書き換えると以下のようになります。
@scope (.red) {
:scope {
background: pink;
}
p {
color: red;
}
}
@scope (.blue) {
:scope {
background: cyan;
}
p {
color: blue;
}
}
:scopeは@scopeで指定した要素にプロパティを適用する場合に用います。
このCSSコードで結果を確認すると、同じ詳細度でも記述順ではなく@scopeで指定した範囲に適用されることが確認できます。
