くまだどうも、くまだです。
CSSのスタイルクエリについて。
CSSのスタイルクエリ
スタイルクエリとは、親コンテナのスタイルによって子要素のスタイルを指定できるCSSです。
例えば、
<div class="wrap">
<div class="boxWrap" style="--red: true;">
<div class="box"></div>
</div>
<div class="boxWrap">
<div class="box"></div>
</div>
</div>
.wrap {
block-size: 100vh;
display: block flex;
align-items: center;
justify-content: center;
}
.box {
inline-size: 100px;
block-size: 100px;
border: 1px solid black;
}
/* スタイルクエリ */
@container style(--red: true) {
.box {
background-color: red;
}
}See the Pen スタイルクエリ by kuma0605 (@kuma0605) on CodePen.
box要素の親コンテナ（boxwrap）にstyle属性で–red:trueと指定しています。
CSSには、以下のように@container styleを使って属性が指定と一致したら、子要素boxのスタイルが適用されます。
/* スタイルクエリ */
@container style(--red: true) {
.box {
background-color: red;
}
}片方のboxwrapにはstyle属性を指定していないor –red:trueと指定していない場合、子要素boxの背景色は適用されません。
Firefoxブラウザは2024年8月時点では未対応のようです。
親要素や祖先要素のスタイルが～～のとき、子要素のスタイルを○○に変更、みたいなときに使えそう。
ここまで読んでくださりありがとうございました。