CSS 子要素に特定クラスがあったら

2024年02月19日

この記事は約1分で読めます。

CSSで子要素に特定のクラスが有ったらを指定する方法のご紹介です。CSSで子要素の状態を指定する場合は、疑似要素の「:has()」を使います。

実際の指定方法を下記のHTMLを使って説明します。

<div class="demo">
  <h2>タイトル</h2>
  <ul>
    <li>リスト１</li>
    <li class="list">リスト２</li>
    <li>リスト３</li>
  </ul>
</div>

HTMLのリスト「li」に「.list」が付いてたら「ul」の文字色を変更してみます。

.demo > ul:has(li.list) {
  color: red;
}

「ul」リストのの子要素の「li」リストのどれかに「.list」が付いていたら、「ul」の文字色を赤にするスタイルになります。
「li」に何もクラスが付いていなかったり、別のクラスが付いている場合、この指定は無視されます。