:has()セレクタ

特定のクラスを持つ子要素を含む親要素だけにスタイルを適用することができる
下の書き方だと商品リストがあり、その中にセール中の商品が含まれている場合に、そのリスト全体に特別なスタイルを適用したいときに使用する

[CSS]
.product-list:has(.product.on-sale) {
background-color: yellow;
}

[HTML]
<div class="product-list">
<div class="product">
<p>商品A</p>
<p>価格: ¥1,000</p>
</div>
<div class="product on-sale">
<p>商品B - セール中！</p>
<p>価格: ¥800</p>
</div>
<div class="product">
<p>商品C</p>
<p>価格: ¥1,200</p>
</div>
</div>
<div class="product-list">
<div class="product">
<p>商品D</p>
<p>価格: ¥10,000</p>
</div>
<div class="product">
<p>商品E</p>
<p>価格: ¥8,000</p>
</div>
<div class="product">
<p>商品F</p>
<p>価格: ¥10,000</p>
</div>
</div>