Result
子要素が特定の数の場合のみスタイリングする的なやつ。上記の例は5個以上7個以内の場合のみ適応させる例です
動的なコンテンツで使える日が来るかもと思ったので備忘録
リスト以外でも勿論大丈夫です
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個以上ある場合は全子要素に適応
値にマイナスを使い、:nth-last-child(-n+7)と:nth-last-child(-n+7) ~ liで7個以内の場合に適応
これらを組み合わせて〇〇個以上、●●個以内の場合にスタイリング、を実現できました
応用も効きそうですね
