<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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.