<section>
  <ul class="list list-blue">
    <li>Sabine</li>
    <li>Adriaan</li>
    <li>Floris</li>
  </ul>
</section>

<section class="with-list-visible">
  <ul class="list list-red">
    <li>Sabine</li>
    <li>Adriaan</li>
    <li>Floris</li>
  </ul>
</section>
:root {
  --another-variable: true;
  --list-visible: false;
  
  font-size: 3rem;
}

.with-list-visible {
  --list-visible: var(--another-variable);
}

.list {
  display: none;

  &.list-blue {
    color: blue;
  }
  
  &.list-red {
    color: red;
  }

  @container style(--list-visible: true) {
    display: block;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.