Ist es möglich, die letzten n Elemente mit dem n-ten Kind auszuwählen?

130

Mit einer Standardliste versuche ich, die letzten beiden Listenelemente auszuwählen. Ich habe verschiedene Permutationen von, An+Baber nichts scheint die letzten 2 auszuwählen:

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 */

Ich kenne einen neuen CSS3-Selektor wie, :nth-last-child()aber ich würde etwas bevorzugen, das in ein paar weiteren Browsern funktioniert, wenn möglich (IE ist mir egal).

css css-selectors DisgruntledGoat
quelle
5
Ungeachtet des IE entspricht die Browserunterstützung :nth-last-child()in etwa der :nth-child() von quirksmode.org . Auch :nth-child()und :nth-last-child()beide wurden in CSS3 eingeführt, ist weder älter noch neuer in diesem Sinne.
BoltClock
Viele nützliche nth-childTricks werden von CSS-Tricks zusammengefasst
m7913d

Antworten:

273

Dadurch werden die letzten beiden Elemente einer Liste ausgewählt:

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>
Erweitern Sie das Snippet

John Guise
quelle
Ja, aber Sie verwenden :nth-last-child()das , was bereits erwähnt wurde.
BoltClock
6
(-n + 2) => Das ist was ich suche. Danke
Surjith SM
16
Dies sollte die akzeptierte Antwort sein, ja, das n-te-letzte Kind wurde bereits erwähnt, aber nicht genau, wie (-n + b) ein cooler Trick ist
BlackTigerX
56

nth-last-childklingt so, als ob es speziell zur Lösung dieses Problems entwickelt wurde, daher bezweifle ich, dass es eine kompatiblere Alternative gibt. Die Unterstützung sieht jedoch ziemlich anständig aus .

Pekka
quelle
Vielen Dank für den Link - es sieht so aus, als ob die Unterstützung für das n-te Kind tatsächlich die gleiche ist wie für das n-te letzte Kind (ich war mir sicher, dass IE8 das n-te Kind unterstützt, aber vielleicht auch nicht).
DisgruntledGoat
14

:nth-last-child(-n+2) sollte den Trick machen

Danyl Sobolev
quelle
1

Aufgrund der Definition der Semantik von nth-childsehe ich nicht, wie dies möglich ist, ohne die Länge der Liste der beteiligten Elemente einzubeziehen. Der Sinn der Semantik besteht darin, die Trennung einer Reihe von untergeordneten Elementen in sich wiederholende Gruppen ( Bearbeiten - danke BoltClock) oder in einen ersten Teil fester Länge zu ermöglichen, gefolgt von "dem Rest". Du willst irgendwie das Gegenteil von dem, was nth-last-childdir gibt.

Spitze
quelle
1
Mit :nth-child()können Sie die ersten mElemente durch Angabe auswählen :nth-child(-n+m).
BoltClock
@BoltClock Ich muss eine Sekunde darüber nachdenken ... na ja, da hast du recht. Offensichtlich bin ich nicht in der Lage, ernsthaft
Pointy
-2

Wenn Sie jQuery in Ihrem Projekt verwenden oder bereit sind, es aufzunehmen, können Sie es nth-last-childüber die Auswahl-API aufrufen (dies ist simuliert, dass es browserübergreifend ist). Hier ist ein Link zu einem nth-last-childPlugin. Wenn Sie diese Methode gewählt haben, um auf die Elemente abzuzielen, an denen Sie interessiert waren:

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

Und wenn Sie dann die lastKlasse anstelle der nth-childoder nth-last-childPseudo-Selektoren erneut formatieren, erhalten Sie eine viel konsistentere browserübergreifende Erfahrung.

Nathan Anderson
quelle