html - CSS セレクターを使用して最後の要素を選択する

Question

ONLY を使用してグループ内の最後の X 要素をターゲットにする方法はありCSSますか (要素の数がわからない場合)?

例 - a の最後の 3 つの要素をターゲットにしulます。

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  ...
  <li>Element X-2</li>
  <li>Element X-1</li>
  <li>Element X</li>
</ul>

Answer 1

:nth-last-child(N)セレクターを使用します。

li:nth-last-child(-n+3) {
    /* ... */
}

このデモを参照してください。

Answer 2

これにより、最後の 3 つの要素にスタイルが適用されます。 Demo

li:nth-last-child(-n+3)
{
    ....
}

サポート

機能 Chrome Firefox (Gecko) IE Opera Safari
基本サポート 4.0 3.5 (1.9.1) 9.0 9.5 3.2