子要素の状態に基づく親要素のスタイリング ― :not()と:has()の活用

「.list li .color-red」はlistクラスの中のli要素の中にあるcolor-redクラスを持つ要素の文字色を赤にします。

「.list li:not(:has(.color-red))」はlistクラスの中のli要素のうちcolor-redクラスを持たない要素をliの文字色を青にします。:hasで子要素の状態から親要素に基づき、:notで否定をしています。