【CSS】特定のクラス名を持つ親要素の子要素にスタイルを当てる

久々にCSSで詰まったのでメモ。

やりたいこと

特定のクラス名を持つ親要素の子要素にスタイルを当てたい。

<div class="parent --color">
  <p class="child">ここにだけスタイルを当てたい</p>
</div>

<div class="parent">
  <p class="child">ここには当てない</p>
</div>

お恥ずかしながら、:has()でいけるだろーって思ってた。

やり方

.parent[class*="--color"] .child { color: #699af8; }