【CSS】子要素の数に応じてスタイルを適用する方法

特定の数の場合にのみ適用

以下のように記述すると子要素が指定した数の場合にのみスタイルを適用できます。

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

子要素が２つの場合にのみスタイルを適用するには以下のように記述します。

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

特定の数以上の場合にのみ適用

以下のように:has()を使用することで指定した数以上子要素が存在する場合にのみスタイルを適用できます。

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

2つ以上ある場合にスタイルを適用するには以下のようにします。

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