<div class="wrapper" style="--weather: sunny;">
  <div class="inner" style="--weather: rainy;">
    <p>Text</p>
  </div>
</div>
.wrapper {
  container-name: wrapper;
}

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.