CSSデモ3件

@scope

CSSスタイルの適用範囲を特定のDOM部分木に限定できるアットルールです。

ブログで解説を読む

ドーナツスコープ

to句でスコープに下限を設け、ネストされた領域の画像だけを枠線の適用から除外します。通常のセレクタと切り替えて比較できます。

ドーナツスコープ

.article内の画像（スタイル適用対象）

.nested-content内の画像（除外される）

@scope (.article) to (.nested-content) {
  img {
    border: 3px solid var(--cyan-500);
    border-radius: var(--radius-md);
  }
}

:scopeを使ったスコープリミット

下限に:scope >を使うと直接の子だけが除外され、孫要素の同名クラスにはスタイルが当たり続ける様子を比較できます。

:scopeを使ったスコープリミット

.article（スコープルート）

.nested-content（直接の子 → 常に除外）

ラッパー要素

.nested-content（孫要素 → :scope >の時は適用される）

@scope (.article) to (:scope > .nested-content) {
  /* .nested-contentがスコープルートの直接の子の場合のみ除外 */
  img {
    border: 3px solid var(--cyan-500);
  }
}

スコープの近接性

入れ子のボックスで、定義順ではなくスコープルートへの近さで勝敗が決まる近接性を、通常のカスケードと切り替えて確認できます。

スコープの近接性

情報メッセージ

警告メッセージ

ネストされた情報メッセージ（@scopeがONなら近接性で決定）

@scopeがONの場合、最も内側の<p>は近接性により.info-boxのスタイルが適用されます
@scopeがOFFの場合、通常のカスケードで.warning-boxのスタイルが優先されます（後に定義されているため）

@scope (.info-box) {
  .message { color: var(--color-fg-info); background: var(--color-bg-info); }
}
@scope (.warning-box) {
  .message { color: var(--color-fg-warning); background: var(--color-bg-warning); }
}