web-dev-qa-db-ja.com

n番目の子で最後のn個のアイテムを選択することは可能ですか？

標準リストを使用して、最後の2つのリストアイテムを選択しようとしています。 An+Bのさまざまな組み合わせを持っていますが、最後の2つを選択するものはありません：

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

私は:nth-last-child()のような新しいCSS3セレクターを知っていますが、可能であれば、さらにいくつかのブラウザーで動作するものを好むでしょう（特にIEを気にしないでください）。

csscss3css-selectors
115
DisgruntledGoat

これにより、リストの最後の2つの要素が選択されます。

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>
237
John Guise

nth-last-childは、この問題を解決するために特別に設計されたように聞こえるので、より互換性のある代替手段があるかどうか疑問です。ただし、サポートは かなりまとも に見えます。

55
Pekka 웃

:nth-last-child(-n+2)トリックを行う必要があります

11
Danyl Sobolev

nth-childのセマンティクスの定義のため、関連する要素のリストの長さを含めずにこれがどのように可能かはわかりません。セマンティクスのポイントは、子要素の束を繰り返しグループ（edit-thanks BoltClock）または一定の長さの最初の部分とそれに続く「残り」に分離できるようにすることです。 nth-last-childが提供するのとは逆のことが必要です。

1
Pointy