CSSで子の数に基づいて親要素のスタイルを当てる方法はありますか（:hasは除く）
Q&A
Closed
解決したいこと
CSSのみで、ulの子要素liが4つ以上あればulにスタイリングしたいのですが
擬似クラス「:has」以外での実装方法はありますか？
例
<ul> ←liが4つ以上でulにスタイリング
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
0
2Answer
前提として現状のCSSは親要素に遡ったセレクタ指定ができません.子要素同士であればnth-childでどうにかできますが,親要素を指定したい場合は:hasができること以外は不可能です.
特に動的に要素数が変わる場合で,さらにバリデーション等の処理を挟みたい場合等は,JavaScriptの使用も含めて検討してください.
CSS単体で可能な動きであっても,可読性はやはりJavaScriptで動的制御するほうがはるかに優れています.
3Like
残念ながら基本的に親要素を指定することができません。
要素の数に応じて兄弟・子要素を指定することはできるので、それらや疑似要素などを親要素に代わる装飾に充てる等の工夫の仕方が必要になります。
こちらの記事をベースに、要素の数＋装飾用の追加要素を総数とすれば以下のように調整は可能です。
詳細は右上の「EDIT ON CODEPEN」からどうぞ。
See the Pen for 125d63763e4d41c0f45f by southkey47 (@southkey47) on CodePen.
ただ@Vercleneさんも仰っている通り、静的（見た目のレイアウトだけで済む）な場合に用いたほうが良いやり方です。
動的な要件が絡むのであればJavaScriptを用いて制御しましょう。
2Like