2019年09月20日(金)

子要素の数が特定の数の間である場合にスタイルを適応させる

• 0
• 0
• 1
• 11

Result

See the Pen "Between" quantity queries by kachibito
(@kachibito) on CodePen.

子要素が特定の数の場合のみスタイリングする的なやつ。上記の例は5個以上7個以内の場合のみ適応させる例です

動的なコンテンツで使える日が来るかもと思ったので備忘録

リスト以外でも勿論大丈夫です

See the Pen ExYOKzz by kachibito
(@kachibito) on CodePen.

css

nth-last-childと間接セレクタを使います

ul li:nth-last-child(n+5):nth-last-child(-n+7):first-child, ul li:nth-last-child(n+5):nth-last-child(-n+7):first-child ~ li { background-color: orange; }

:nth-last-child(n+5)と:nth-last-child(n+5) ~ liで5個以上ある場合は全子要素に適...