CSSでの:has()活用法:要素の数に応じてスタイルを変えるテクニックZenntakaa🕴️CSSでの:has()活用法:要素の数に応じてスタイルを変えるテクニック2024/10/28に公開CSSSassScsstechそもそも擬似クラスの:has()とは?CSSの擬似クラスは、特定の状態にある要素を選択するために使います。:has()擬似クラスには二つの状態の要素を選択することができます。親要素の選択とは特定の子要素を持つ親要素を選択することで、兄要素の選択とは直後の特定のようをがある兄要素を選択することです。これにより今まではできなかった子要素から親要素、弟要素から兄要素を選択することができるようになりました。要素の数が可変の時などに特定の数の場合にスタイリングをしなければいけない時などに便利だと思うので、今回はこの:has()を使って子の個数に応じたスタイリングの適用をまとめたいと思います。}}ul要素がN番目の子要素を持っている場合、そのul要素にスタイルを適用します。要素の直下にあるN番目の子要素が「最後の子要素」の場合、そのul要素にスタイルを適用します。要素の直下に「最後の子要素であるN番目以内の子要素」の場合、そのul要素にスタイルを適用します。要素が「M番目の子要素」を持っているかどうかを判定しています。要素が「最後の子要素がN番目以内であること」を確認しています。これにより、子要素がN個以下であることが判定されます。この組み合わせにより、ulの要素が「M個以上N個以下の子要素」の場合にそのul要素にスタイルを適用します。以下サンプルコードです。要素の個数やnth-childの数を変更して確かめてみると分かりやすいと思います。以上がCSSでの:has()を使った要素の個数に応じたスタイリングの方法でした。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。