:last-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Die :last-of-type CSS Pseudoklasse repräsentiert das letzte Element seines Typs in einer Gruppe von Geschwisterelementen.

Probieren Sie es aus

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:last-of-type {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

Syntax

css
:last-of-type {
  /* ... */
}

Beispiele

Das letzte Absatz element stylen

HTML

html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

css
p:last-of-type {
  color: red;
  font-style: italic;
}

Ergebnis

Verschachtelte Elemente

Dieses Beispiel zeigt, wie auch verschachtelte Elemente angesprochen werden können. Beachten Sie, dass der Universalselektor (*) impliziert ist, wenn kein einfacher Selektor geschrieben wird.

HTML

html
<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>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`!</div>
</article>

CSS

css
article :last-of-type {
  background-color: pink;
}

Ergebnis

Elemente mit mehreren Selektoren

Dieses HTML-Beispiel enthält verschachtelte Elemente unterschiedlicher Typen. Das CSS enthält sowohl Typselektoren als auch Klassenselektoren.

HTML

html
<p>This `p` is not selected.</p>
<p>This `p` is not selected either.</p>
<p>
  This `p` is last `p` element of its parent e.g. `body` selected by `p` type
  selector.
</p>
<div class="container">
  <div class="item">This `div` is not selected.</div>
  <div class="item">This `div` is not selected either.</div>
  <div class="item">
    This `div` is last `div` element of its parent `div` selected by `.container
    .item` class selector.
  </div>
  <p class="item">
    This `p` is last `p` element of its parent `div` selected by `.container
    .item` class selector.
  </p>
</div>

CSS

css
p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}

Ergebnis

Das letzte <div> und das letzte <p> sind beide rot und fett, da .item:last-of-type das letzte jedes Typs auswählt, sofern dieses letzte Element auch die Klasse item hat.

Spezifikationen

Specification
Selectors Level 4
# last-of-type-pseudo

Browser-Kompatibilität

Siehe auch