親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS

CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーは以下の 2 種類に分類されます。

コンテナサイズクエリー：コンテナ要素の現在のサイズに基づいてスタイルを適用する。e.g. @container (min-width: 30em) { ... }
コンテナスタイルクエリー：コンテナ要素のスタイルに基づいてスタイルを適用する。e.g. @container style(--color: red) { ... }

この記事では、コンテナースタイルクエリーについて見ていきます。

コンテナスタイルクエリーの概要

コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価します。@media ルールと同様に、指定された条件が一致する場合にスタイルが適用されます。

例を見てみましょう。ここでは @container() ルールに --bg-color カスタムプロパティが black の場合に、p 要素のテキストカラーを white に変更します。

.wrapper {
  background-color: var(--bg-color, white);
}
 
p {
  color: black;
}
 
@container style(--bg-color: black) {
  p {
    color: white;
  }
}

結果は以下のようになります。

現在 style() に渡せるプロパティはカスタムプロパティのみですが、将来的には他のプロパティもサポートされる予定です。

直接の親要素ではない要素を元にスタイルを適用する

要素が入れ子になっている場合について考えてみましょう。以下の HTML は .wrapper > .inner > p の構造を持っています。このとき、.wrapper と .inner にそれぞれ同一のカスタムプロパティが定義されている場合、コンテナスタイルクエリーはどの要素を基準にスタイルを適用するでしょうか？

<div class="wrapper" style="--weather: sunny;">
  <div class="inner" style="--weather: rainy;">
    <p>Text</p>
  </div>
</div>

@container style(--weather: sunny) {
  p {
    color: orange;
  }
}
 
@container style(--weather: rainy) {
  p {
    color: blue;
  }
}

このとき、コンテナスタイルクエリの対象の p 要素に最も近い親要素が基準となります。つまり、.inner 要素に定義された --weather: rainy が適用されるため、テキストカラーは青色になります。

常に .wrapper 要素を基準にスタイルを適用したい場合は、container-name プロパティを .wrapper 要素に指定し、@container ルールにおいて container-name で指定した名前を参照します。

.wrapper {
  container-name: wrapper;
}
 
@container wrapper style(--weather: sunny) {
  p {
    color: orange;
  }
}
 
@container wrapper style(--weather: rainy) {
  p {
    color: blue;
  }
}

このようにすることで、.wrapper 要素を基準にスタイルが適用されます。以下のように文字の色がオレンジ色になっていることが確認できます。

まとめ

@container ルールはコンテナ（親要素）の特性に基づいてスタイルを適用するためのルールで、コンテナサイズクエリーとコンテナスタイルクエリーの 2 種類がある
コンテナスタイルクエリーは @container style(--custom-property: value) { ... } でスタイルを定義し、--custom-property が一致する場合にスタイルが適用される
入れ子になっている要素の場合、最も近い親要素が基準となるが、container-name プロパティを使用することで基準を指定できる