: letztes Kind - CSS-Tricks

Anonim

Mit dem :last-childSelektor können Sie das letzte Element direkt in seinem enthaltenden Element ausrichten. Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, dh es wird verwendet, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterinhalten zu formatieren.

Angenommen, wir haben einen Artikel und möchten den letzten Absatz verkleinern, um als Abschluss des Inhalts zu dienen (wie die Anmerkung eines Herausgebers):


Lorem ipsum…

Dolor sit amet…

Consectetur adipisicing…

Last paragraph…

Anstatt eine Klasse (z. B. .last) zu verwenden, können wir :last-childsie auswählen:

p:last-child ( font-size: 0.75em; )

Die Verwendung :last-childist sehr ähnlich, :last-of-typeaber mit einem entscheidenden Unterschied: Sie ist weniger spezifisch. :last-childversucht nur, das allerletzte untergeordnete Element eines übergeordneten Elements abzugleichen, während last-of-typedas letzte Vorkommen eines angegebenen Elements übereinstimmt, auch wenn es nicht zuletzt im HTML-Code tot ist. Im obigen Beispiel wäre das Ergebnis dasselbe, nur weil das letzte Kind von articleauch zufällig das letzte pElement ist. Dies zeigt die Kraft von :last-child: Es kann ein Element in Bezug auf alle seine Geschwister identifizieren, nicht nur Geschwister des gleichen Typs.

Das ausführlichere Beispiel unten zeigt die Verwendung :last-childeines verwandten Pseudoklassen-Selektors :first-child.

Schauen Sie sich diesen Stift an!

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein 3.2+ Irgendein 9,5+ 9+ Irgendein Irgendein

:last-childwurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Versionen von Browsern dies nicht unterstützen. Die moderne Browserunterstützung ist jedoch einwandfrei, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen verwendet. Wenn Sie ältere Browserunterstützung benötigen, entweder Polyfill für IE, oder verwenden Sie diese Selektoren auf unkritische Weise á la progressive Verbesserung, was empfohlen wird.