:last-child

Der Selektor :last-child ermöglicht es Ihnen, das letzte direkt in seinem enthaltenden Element befindliche Element anzusprechen. Er ist in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er zur Gestaltung von Inhalten basierend auf seiner Beziehung zu übergeordneten und Geschwisterinhalten verwendet wird.

Angenommen, wir haben einen Artikel und möchten den letzten Absatz kleiner gestalten, um als Abschluss des Inhalts zu dienen (wie eine Anmerkung des Redakteurs).

<article>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
  <p>Last paragraph...</p>
</article>

Anstatt eine Klasse zu verwenden (z. B. .last), können wir :last-child verwenden, um ihn auszuwählen.

p:last-child {
  font-size: 0.75em;
}

Die Verwendung von :last-child ähnelt stark :last-of-type, jedoch mit einem **kritischen Unterschied:** es ist weniger spezifisch. :last-child versucht nur, das allerletzte Kind eines Elternelements abzugleichen, während last-of-type das letzte Vorkommen eines bestimmten Elements abgleicht, auch wenn es nicht das allerletzte im HTML ist. Im obigen Beispiel wäre das Ergebnis dasselbe, nur weil das letzte Kind des article zufällig auch das letzte p-Element ist. Dies zeigt die Stärke von :last-child: es kann ein Element in Bezug auf alle seine Geschwister identifizieren, **nicht nur Geschwister desselben Typs**.

Das vollständigerere Beispiel unten demonstriert die Verwendung von :last-child und einer verwandten Pseudoklassen-Selektor, :first-child.

Check out this Pen!

Weitere Ressourcen

• Verwandt mit: first-child, last-of-type, :first-of-type
• Mozilla Docs

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	3.2+	Alle	9.5+	9+	Alle	Alle

:last-child wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch tadellos, und die neuen Pseudoselektoren werden in Produktionsumgebungen weit verbreitet eingesetzt. Wenn Sie ältere Browser unterstützen müssen, können Sie entweder ein Polyfill für IE verwenden oder diese Selektoren auf nicht kritische Weise à la progressive enhancement verwenden, was empfohlen wird.