n番目の子を持つ最後のn項目を選択することはできますか？

130

標準リストを使用して、最後の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 */

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

css css-selectors

— 不満の山羊
ソース

5

IEにもかかわらず、ブラウザのサポート:nth-last-child()は:nth-child() quirksmode.orgによるものとほぼ同じです。また、:nth-child()そして:nth-last-child()両方CSS3で導入されていない、どちらもその意味で古いか新しいかました。

— BoltClock

多くの便利なnth-childトリックがcss-tricks

— m7913d

273

これにより、リストの最後の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>

スニペットを展開

— ジョン・ギーズ
ソース

はい。ただし、:nth-last-child()すでに言及されているものを使用しています。

— BoltClock

6

（-n + 2）=>これが私が探しているものです。ありがとう

— Surjith SM

16

これは受け入れられる答えであるはずです。はい、nth-last-childはすでに言及されていますが、正確には（-n + b）はクールなトリックではありません

— BlackTigerX

56

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

— ペッカ
ソース

リンクをありがとう-nth-childのサポートは実際にはnth-last-childと同じように見えます（IE8はnth-childをサポートしていると確信していましたが、サポートしていない可能性があります）。

— DisgruntledGoat 2011年

14

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

— ダニル・ソボレフ
ソース

1

のセマンティクスの定義のため、nth-child関係する要素のリストの長さを含めずにこれがどのように可能であるかはわかりません。セマンティクスの要点は、子要素の束を繰り返しグループ（編集 -BoltClockに感謝）または特定の長さの最初の部分に分離し、その後に「残り」を分離できるようにすることです。あなたはそれとは正反対のものnth-last-childが欲しいのです。

— 先のとがった
ソース

1

では、を指定し:nth-child()て最初のm要素を選択できます:nth-child(-n+m)。

— BoltClock

@BoltClock私は一瞬それについて考えなければならないつもりです...ああ、そうですね、あなたはそれについて正しいです。明らかに、私はCSS3セレクターを発明したときの委員会の意図が何であったかについて真剣に宣言する立場にありません:-)

— Pointy

-2

プロジェクトでjQueryを使用している場合、またはjQueryを含めても構わない場合はnth-last-child、セレクターAPIを介して呼び出すことができます（これは、ブラウザー間でシミュレーションされるためです）。ここにnth-last-childプラグインへのリンクがあります。この方法で、興味のある要素をターゲットにした場合：

$('ul li:nth-last-child(1)').addClass('last');

そしてlast、nth-childまたはnth-last-child疑似セレクターの代わりにクラスを再度スタイルすると、はるかに一貫したクロスブラウザーエクスペリエンスが得られます。

— ネイサン・アンダーソン
ソース