W3docs
de
Anmelden

CSS :last-of-type Pseudo-Klasse

Die CSS-Pseudoklasse :last-of-type wählt das letzte Element seines Typs unter den Geschwisterelementen aus. Beispiele und Erklärungen.

Die CSS-Pseudoklasse :last-of-type wählt ein Element aus, das unter den Kindelementen seines Elternelements das letzte Element seines Typs ist. „Typ" bezeichnet dabei den Tag-Namen des Elements — so trifft p:last-of-type das letzte <p> innerhalb seines Elternelements, unabhängig davon, wie viele andere Elemente (divs, Überschriften, spans) danach folgen.

Diese Seite erklärt, was :last-of-type trifft, seine Syntax, sein Verhalten bei verschiedenen Elementtypen und — besonders wichtig — wie es sich von der ähnlich aussehenden :last-child-Pseudoklasse unterscheidet.

Die Pseudoklasse :last-of-type ist gleichwertig mit :nth-last-of-type(1) und wählt exakt dasselbe Element aus.

Wann verwenden

Greifen Sie auf :last-of-type zurück, wenn Sie das letzte Element eines bestimmten Tags gestalten möchten, ohne auf seine genaue Position angewiesen zu sein. Häufige Anwendungsfälle:

  • Den unteren Abstand oder Rahmen des letzten Absatzes in einer Karte entfernen.
  • Das letzte Listenelement, Bild oder den letzten Abschnitt in einem Container mit gemischten Elementtypen gestalten.
  • „Das letzte seiner Art" ansprechen, wenn nicht sicher ist, ob es auch das allerletzt Kind des Elternelements ist.

Wenn Sie stattdessen das Element benötigen, das buchstäblich das letzte Kindelement des Elternelements ist — unabhängig vom Typ — verwenden Sie :last-child. Weitere Details im Vergleich unten.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :last-of-type-Syntax

:last-of-type {
  css declarations;
}

Beispiel des :last-of-type-Selektors:

:last-of-type-Codebeispiel

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

Elternelemente ansprechen

Der Selektor kann auch auf Elternelemente angewendet werden.

Info

Der *-Selektor wird implizit verwendet, wenn kein Typselektor angegeben ist (z. B. ist *:last-of-type gleichwertig mit :last-of-type).

Im folgenden Beispiel gestaltet article:last-of-type das letzte <article> unter seinen Geschwisterelementen. Beachten Sie, dass die Pseudoklasse pro Typ innerhalb jedes Elternelements ausgewertet wird: Die <em>-Elemente werden getrennt von den <div>- und <b>-Elementen gruppiert, sodass jeder Tag seinen eigenen „letzten vom Typ" hat.

Beispiel für das Ansprechen eines Elternelements:

CSS :last-of-type Pseudo-Klasse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <article>
      <div>This "div" is first.</div>
      <div>This <span>nested "span" is last</span>!</div>
      <div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>
Probier es selbst »

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

Die Selektoren :last-child und :last-of-type sehen ähnlich aus, beantworten jedoch unterschiedliche Fragen:

  • :last-child trifft ein Element nur dann, wenn es das allerletzte Kindelement seines Elternelements ist — die Position ist entscheidend, nicht der Typ.
  • :last-of-type trifft das letzte Element eines bestimmten Typs, auch wenn danach noch andere Elemente folgen.

p:last-of-type trifft also das letzte <p>, selbst wenn danach ein <span> folgt, während p:last-child dieses <p> überhaupt nicht treffen würde (weil das <span> das eigentliche letzte Kindelement ist). Im folgenden Beispiel gilt die Regel für den letzten Absatz unabhängig von den Spans, während span:last-child nur den letzten Span anspricht — der zufällig auch das letzte Kindelement des Body ist.

Beispiel für die Selektoren :last-of-type und :last-child:

Selektoren :last-of-type und :last-child

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>
Probier es selbst »

Besonderheiten

  • :last-of-type ist pro Elternelement gültig: Jedes Elternelement hat sein eigenes „letztes Paragraph", „letztes div" usw.
  • Es funktioniert nur mit Elementtypen. Ein klassenbasiertes Äquivalent gibt es nicht — .box:last-of-type bedeutet „das letzte Element, dessen Typ zu dem Element passt, das auch die Klasse box hat", nicht „das letzte Element mit der Klasse box". Verwenden Sie :last-child in Kombination mit einer Klasse oder :nth-last-of-type() für eine feinere Steuerung.
  • Hat ein Elternelement nur ein Element eines bestimmten Typs, ist dieses einzelne Element gleichzeitig sein eigenes :last-of-type (und :first-of-type).

Verwandte Selektoren

Übung

Übung
Was trifft die CSS-Pseudoklasse :last-of-type?
Was trifft die CSS-Pseudoklasse :last-of-type?
Was this page helpful?