スタイルクエリ（@container style()）

@container style(font-style: italic) {
  i,
  em {
    background: lavender;
  }
}

<div style="--theme: dark"> 
  <div class="demo-card">
    <figure>FPO</figure>
    <p>This card has <code class=" hljs ">--theme: dark</code> applied to the parent. We can now style its children based on that custom property value.</p>
    <button>I am a button</button>
  </div>
</div>

@container style(--theme: dark) {
  .card {
    background: royalblue;
    border-color: navy;
    color: white;
  }

  .card button {
    border-color: navy;
    background-color: dodgerblue;
    color: white;
  }
}