<div class="box">
<p class="color">
親要素の幅が380pxピクセル以上の時にテキストのカラーを赤にする
</p>
</div>
.box {
/* 名前付きコンテナの定義 */
container: box / inline-size;
/* デフォルトの色を指定 */
color: #333;
/* コンテナの幅を確認しやすいように幅を指定 */
max-width: 600px;
/* 視覚的な確認のために境界線を追加 */
border: 1px solid #ccc;
padding: 1rem;
}
/* boxが380px以上の時のスタイル */
@container box (width >= 380px) {
.color {
color: red;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.