W3docs
de
Anmelden

CSS :last-child Pseudo-Klasse

Wie die CSS :last-child Pseudo-Klasse funktioniert, der Unterschied zu :last-of-type und praktische Beispiele für Listen, Tabellen und Formulare.

Die CSS :last-child-Pseudo-Klasse wählt ein Element aus, das das letzte Kind seines Elternelements ist — also das letzte Geschwisterelement in der Kindliste des Elternelements. Sie wird am häufigsten verwendet, um einen abschließenden Rahmen zwischen Listenelementen zu entfernen, den unteren Außenabstand des letzten Absatzes zurückzusetzen oder die letzte Zeile einer Tabelle hervorzuheben.

Diese Seite erklärt, wie :last-child ausgewertet wird, die wichtige Regel, die die meisten Entwickler überrascht, den Unterschied zu :last-of-type sowie mehrere ausführbare Beispiele.

Wie :last-child funktioniert

Der Selektor p:last-child bedeutet nicht „das letzte <p> im Elternelement". Er bedeutet „ein <p>, das gleichzeitig das allerletzte Kind seines Elternelements ist." Die Position wird zuerst geprüft; der Tag-Name wird danach geprüft.

/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
  font-weight: bold;
}

Betrachte dieses Markup:

<div>
  <p>Paragraph — NOT selected.</p>
  <span>I am the last child, so the rule above never fires.</span>
</div>

Da <span> das letzte Kind ist, trifft p:last-child hier auf nichts zu. Um das letzte <p> unabhängig davon anzusprechen, was danach folgt, verwende stattdessen :last-of-type.

:last-child ist das Spiegelbild von :first-child. Um vom Ende zu zählen (z. B. das vorletzte Element), verwende :nth-last-child().

Info

In Selectors Level 3 musste das übereinstimmende Element ein Elternelement haben. Selectors Level 4 lockert dies: :last-child kann jetzt auch ein Wurzelelement ohne Elternelement treffen.

Syntax

selector:last-child {
  /* declarations */
}

:last-child kann mit jedem Elementselektor, jeder Klasse oder ID kombiniert werden:

li:last-child      { border-bottom: none; }    /* last <li> in its parent */
.card:last-child   { margin-bottom: 0; }       /* last element with class .card */
tr:last-child td   { font-weight: bold; }      /* cells in the last table row */

Grundlegendes Beispiel: Absätze

Die beiden folgenden Absätze sind beide Kinder von <body>. p:last-child trifft nur auf den zweiten zu, da er das letzte Kind seines Elternelements ist.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-child {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Last-child selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Probier es selbst »

Listenbeispiel: Das letzte <li> stylen

li:last-child gilt für das letzte <li> innerhalb jeder <ul> oder <ol> unabhängig voneinander — verschachtelte Listen haben jeweils ihr eigenes letztes Kind.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:last-child {
        background: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <ul>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ul>
    <ol>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ol>
  </body>
</html>
Probier es selbst »

Mehrere Absätze innerhalb eines Containers

Wenn vier <p>-Elemente als Geschwister im selben Elternelement vorhanden sind, trifft p:last-child nur auf das vierte zu.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-child {
        background: #8ebf42;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </body>
</html>
Probier es selbst »

Verschachtelte Listen

:last-child wird auf jeder Verschachtelungsebene unabhängig angewendet. Im folgenden Beispiel ist „List Item 3" das letzte Kind der äußeren <ul> und „List Item 3.3" das letzte Kind der inneren <ul>.

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li {
        color: #8ebf42;
      }
      ul li:last-child {
        border: 1px dotted #8ebf42;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>
        List Item 3
        <ul>
          <li>List Item 3.1</li>
          <li>List Item 3.2</li>
          <li>List Item 3.3</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
Probier es selbst »

Häufige Anwendungsfälle

Einen abschließenden Trenner entfernen

Ein klassisches Muster: Allen Elementen einen Trennstrich hinzufügen und ihn dann vom letzten Element entfernen, damit die Gruppe nicht mit einer überhängenden Linie endet.

.menu li {
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}

/* Remove the bottom border from the final item */
.menu li:last-child {
  border-bottom: none;
}

Das ist wartungsfreundlicher als das manuelle Hinzufügen einer Klasse zum letzten <li>, da der Selektor sich automatisch anpasst, wenn Elemente hinzugefügt oder entfernt werden.

Außenabstand des letzten Absatzes entfernen

Inhaltsblöcke benötigen oft Abstände zwischen Absätzen, aber nicht nach dem letzten — andernfalls verdoppelt sich der Außenabstand des Absatzes mit dem Innenabstand des Containers.

.content p {
  margin-bottom: 1rem;
}

.content p:last-child {
  margin-bottom: 0;
}

Die letzte Tabellenzeile stylen

table tr:last-child td {
  font-weight: bold;
  border-bottom: 2px solid #333;
}

Dies hebt die Ergebniszeile in einer Übersichtstabelle hervor, ohne eine Klasse im HTML hinzuzufügen.

:last-child vs. :last-of-type

Diese beiden Selektoren werden häufig verwechselt. Der wesentliche Unterschied:

SelektorWas geprüft wird
p:last-childIst dieses <p> das letzte Kind seines Elternelements (nach Position)?
p:last-of-typeIst dieses <p> das letzte <p> unter seinen Geschwistern (nach Typ, unabhängig von anderen Elementen)?
<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>  <!-- p:last-of-type matches here -->
  <span>A span</span> <!-- this is the last child -->
</div>
  • p:last-child → trifft auf nichts zu (das letzte Kind ist ein <span>, kein <p>).
  • p:last-of-type → trifft auf „Paragraph 2" zu (das letzte <p> unter den Geschwistern).

Verwende :last-child, wenn die Position entscheidend ist. Verwende :last-of-type, wenn nur der Elementtyp relevant ist.

Spezifität

:last-child ist eine Pseudo-Klasse und trägt daher 0-1-0 zur Spezifität bei — gleichwertig mit einem Klassenselektor. Kombinierte Selektoren addieren sich normal:

li:last-child        /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child  /* specificity: 0-2-1 (class + type + pseudo-class) */

Browser-Unterstützung

:last-child wird von jedem modernen Browser unterstützt (Chrome, Firefox, Safari, Edge) und das bereits seit IE 9. Kein Vendor-Präfix oder Fallback ist erforderlich.

Spezifikation

Verwandte Selektoren

  • :first-child — wählt das erste Kind seines Elternelements aus.
  • :last-of-type — wählt das letzte Element eines bestimmten Typs aus, unabhängig von anderen Elementtypen zwischen den Geschwistern.
  • :only-child — wählt ein Element aus, das das einzige Kind seines Elternelements ist.
  • :nth-last-child() — wählt Elemente vom Ende ausgehend mithilfe einer Formel aus.
  • :nth-child() — wählt Elemente vom Anfang ausgehend mithilfe einer Formel aus.

Übungen

Übung
Was repräsentiert die CSS-Pseudo-Klasse :last-child?
Was repräsentiert die CSS-Pseudo-Klasse :last-child?
Was this page helpful?