1. ホーム
  2. css

[解決済み] CSSの最終子(-1)

2022-04-16 20:09:19

質問

リストの最後尾の子を選択できるCSSセレクタを探しています。

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

静的な方法です。

ul li:nth-child(5)

動的な方法です。

ul li:last-child(-1)

また、nth-last-child は動的な方法を提供しないようです。私はjavascriptにフォールバックすることができますが、私は私が見落としているCSSの方法があるのだろうかと思います。

解決方法は?

あなたは 可能 使用 :nth-last-child() 実は :nth-last-of-type() 他に何が使えるかわからない。しかし、もしあなたが、リストにさらに子供が追加されたときに、スタイルが新しい2番目の最後の子供に適用されるかどうかを意味するなら、それはそうです。 インタラクティブなフィドル。

ul li:nth-last-child(2)