CSS 子要素がn個以上ある時（:has()を上手く使うぜ）💨

子要素によって親の要素のスタイルが変更するのってJSじゃなきゃ指定がムズそうだぜ！って思うけど「:has()」を使えば結構簡単にできちゃうんだ。

下のHTMLで子要素が５個以上ある時、親要素の文字色を赤に変更して子要素の文字色を赤くしてみます。

HTML

<div class="demo">
  <ul>
    <li>吹き拔ける風にさえ目を閉じる</li>
    <li>お前は走りだす何かに追われるよう</li>
    <li>俺が見えないのか すぐそばにいるのに</li>
    <li>人波に消えて行く記憶の吐息</li>
    <li>愛のない一人舞台もう耐えきれない</li>
  </ul>
</div>

CSS

.demo ul:has( > :nth-child(5) ) {
  color: #ca0048;
  font-weight: 600;
}

<結果

紅~kurenai~ X Japan
吹き拔ける風にさえ目を閉じる
お前は走りだす何かに追われるよう
俺が見えないのかすぐそばにいるのに
人波に消えて行く記憶の吐息
愛のない一人舞台もう耐えきれない

上手くX Japanの歌詞を紅に染められましたね。
「:has()」で直下の子要素に5個目が有ったらを指定して
5個以上子要素が有る時の指定をしています。

CSSで「:has()」を利用する時は、一度頭で考えてからじゃないと指定が難しいよね。