CSSでの:has()活用法：要素の数に応じてスタイルを変えるテクニック

そもそも擬似クラスの:has()とは？

CSSの擬似クラスは、特定の状態にある要素を選択するために使います。
:has()擬似クラスには二つの状態の要素を選択することができます。
・親要素の選択
・兄要素の選択
親要素の選択とは特定の子要素を持つ親要素を選択することで、兄要素の選択とは直後の特定のようをがある兄要素を選択することです。これにより今まではできなかった子要素から親要素、弟要素から兄要素を選択することができるようになりました。

要素の数が可変の時などに特定の数の場合にスタイリングをしなければいけない時などに便利だと思うので、今回はこの:has()を使って子の個数に応じたスタイリングの適用をまとめたいと思います。

要素の個数がN個以上の時

ul:has(> :nth-child(N)) {
  li {
    ...
  }
}

ul要素がN番目の子要素を持っている場合、そのul要素にスタイルを適用します。

要素の個数がN個の時

ul:has(> :nth-child(N):last-child) {
  li {
    ...
  }
} 

要素の直下にあるN番目の子要素が「最後の子要素」の場合、そのul要素にスタイルを適用します。

要素の個数がN個以下の時

ul:has(> :nth-child(-n+N):last-child) {
  li {
    ...
  }
}

ul 要素の直下に「最後の子要素であるN番目以内の子要素」の場合、そのul要素にスタイルを適用します。

要素の個数がM個以上N個以下の時

ul:has(> :nth-child(M)):has(> :nth-child(-n+N):last-child) {
  li {
    ...
  }

ul:has(> :nth-child(M))：この部分は、ul 要素が「M番目の子要素」を持っているかどうかを判定しています。
:has(> :nth-child(-n+N):last-child)：こちらの条件は、ul 要素が「最後の子要素がN番目以内であること」を確認しています。これにより、子要素がN個以下であることが判定されます。
この組み合わせにより、ulの要素が「M個以上N個以下の子要素」の場合にそのul要素にスタイルを適用します。

以下サンプルコードです。要素の個数やnth-childの数を変更して確かめてみると分かりやすいと思います。

以上がCSSでの:has()を使った要素の個数に応じたスタイリングの方法でした。要素が可変の時などで特定の数の時にスタイリングを当てたい時などはJSを使わずにCSSのみで完結できるので便利だと思うので、ぜひ使ってみてください！