CSS letztes Kind (-1)

161

Ich suche nach einem CSS-Selektor, mit dem ich das vorletzte Kind der Liste auswählen kann.

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

Statische Methode:

ul li:nth-child(5)

Dynamische Methode:

ul li:last-child(-1)

was natürlich nicht validiert, auch das n-te-letzte Kind scheint keinen dynamischen Weg zu bieten. Ich kann auf Javascript zurückgreifen, aber ich frage mich, ob es einen CSS-Weg gibt, den ich übersehen habe

Hedde van der Heide
quelle
11
Es wird normalerweise "vorletzter" genannt. Es gibt auch ein anderes schickes Wort dafür: "vorletzte".
BoltClock
2
@ BoltClock Ich liebe das Wort "vorletzte". Ich werde es jetzt in einem snarky Facebook-Update verwenden.
Andrew Barber
3
Mögliches Duplikat von Select vorletztes Element mit CSS
Castro Roy
2
Vielen Dank an alle, die das vorletzte erwähnt haben - dies war die Nummer 1 bei Google für "vorletztes CSS".
Chakeda

Antworten:

303

Sie können verwenden :nth-last-child(); Außerdem :nth-last-of-type()weiß ich nicht, was Sie sonst noch verwenden könnten. Ich bin nicht sicher, was Sie unter "dynamisch" verstehen, aber wenn Sie meinen, ob der Stil für das neue vorletzte Kind gilt, wenn mehr Kinder zur Liste hinzugefügt werden, wird dies der Fall sein. Interaktive Geige.

ul li:nth-last-child(2)
BoltClock
quelle
Okay das funktioniert! Der Code-Interpretator (jsfiddle) hat es nicht validiert. Erraten Sie einen Fehler auf ihrer Seite! danke
Hedde van der Heide
4
@ David Allen: Ich glaube nicht, dass es ihn interessiert, wenn er bereits versucht, :nth-child(5)und zu verwenden :last-child. Kommentare wie diese sollten entweder auf die Frage eingehen oder für sich behalten werden.
BoltClock
1
Er weiß möglicherweise nichts über das Problem ohne Support. Ich hebe es nur hervor ... Ich habe eine Antwort mit jQuery gegeben und ich bin froh, sagen zu können, dass es mit Benutzern mit deaktivierter JavaScript-Funktion nicht funktioniert. Aber mehr Leute benutzen IE7 / 8 als JS deaktiviert zu haben
David Allen
1
@ David, ich glaube, das Selectivrz- oder Modernizr-Plugin kann dieses Problem beheben. Ich muss die Dokumente anzeigen
Hedde van der Heide
@ArgsKwargs Great Comment hat noch nie von selectivizr gehört. Lassen Sie uns wissen, ob es das n-te-letzte Kind unterstützt
David Allen
1

Wenn Sie PHP nicht dazu bringen können, dieses Element mit einer Klasse zu kennzeichnen, sollten Sie jQuery verwenden.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});
David Allen
quelle
6
Es ist geradezu ärgerlich, dass jQuery nicht implementiert wird, :nth-last-child()nur weil John glaubt, dass niemand es verwendet .
BoltClock
Ich würde lieber mit Python beschriften ;-) ontopic: Nun, CSS scheint auf diese Weise in Ordnung zu sein, vielleicht denkt jsfiddle auch, dass niemand es benutzt :-)
Hedde van der Heide
@ArgsKwargs: Seltsam, warum es in jsFiddle nicht funktionieren würde. Es liegt am Browser, dies zu interpretieren. Es hat keine eigene CSS-Engine.
BoltClock
@ BoltClock versteh mich nicht falsch, es funktioniert, der Code-Helfer (Farbvisualisierung) zeigt nur etwas Unbekanntes an (also habe ich es nicht einmal versucht)
Hedde van der Heide
Ich glaube nicht, dass der Code nicht geschlossen ist. Aber ich weiß, was du mit der "Farbvisualisierung" meinst
David Allen