Wählen Sie das vorletzte Element mit CSS aus

135

Ich weiß schon von: letztes Kind. Aber gibt es eine Möglichkeit, das div auszuwählen:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

HINWEIS: ohne jQuery nur mit CSS

html css css-selectors

— dynamisch
quelle

Sicher gibt es eine Logik, warum das vorletzte Kind von Bedeutung ist?

— David Tang

Ja, ich muss sowohl den letzten als auch den vorletzten auswählen, um einige Stile anzuwenden

— dynamisch

Warum kannst du nicht einfach eine Klasse auf die vorletzte

— Division setzen

"Warum können Sie nicht einfach eine Klasse in das vorletzte Div einfügen?": Vielleicht, wenn Sie Inhalte generieren, die generiert werden und in denen Sie keinen (einfachen) Zugriff haben, um dem vorletzten Element eine Klasse hinzuzufügen?

— Henrik

Antworten:

271

In CSS3 haben Sie:

:nth-last-child(2)

Siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-child Browser-Unterstützung:

Chrome 2

Firefox 3.5

Opera 9.5, 10

Safari 3.1, 4

Internet Explorer 9

— Frosty Z.
quelle

Dies ist wahrscheinlich der richtige Weg, es sei denn, Sie können dem Div, das Sie auswählen möchten, eine Klasse hinzufügen. Wie Frosty erwähnt hat, wird CSS3 von älteren Browsern oder IE nicht unterstützt. Jquery ist eine viel bessere Option, wenn Sie sich Gedanken über die berechenübergreifende Berechenbarkeit machen.

— Thomas

Es war ein Kopieren / Einfügen aus dem verlinkten Artikel ... Bearbeitete Antwort, danke.

— Frosty Z

Lösung in CSS: #container>: n-tes letztes Kind (2) {Hintergrund: rot;} Bitte überprüfen Sie diesen Codepen, um ihn live zu sehen: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

Da wir keinen älteren IE unterstützen müssen, funktioniert diese Antwort einwandfrei. Ehrlich gesagt, wenn Leute immer noch IE 8 und niedriger verwenden, verdienen sie es nicht, hübsche Dinge zu haben.

— Stender

Hinweis: Diese Antwort wurde veröffentlicht, da OP später in Kommentaren angegeben hat, dass er die letzten beiden Elemente auswählen muss , nicht nur das vorletzte.

Der :nth-childCSS3-Selektor ist tatsächlich leistungsfähiger als Sie es sich jemals vorgestellt haben!

Hiermit werden beispielsweise die letzten beiden Elemente ausgewählt #container:

#container :nth-last-child(-n+2) {}

Dies ist jedoch nur der Anfang einer schönen Freundschaft.

:nth-child Browser-Unterstützung

Code-Snippet anzeigen

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Expand snippet

— Kapa
quelle

Schön, meine Antwort wählt nur das letzte Kind minus 1 aus. Wusste nichts davon. + 'd

— rsplak