CSS :last-of-type-Pseudoklasse
Die CSS--pseudo-Klasse :last-of-type` wählt ein Element aus, das das letzte Element seines Typs in der Liste der Kinder seines Elternelements ist.
Die Pseudoklasse :last-of-type ist äquivalent zu :nth-last-of-type(1) und wählt exakt dasselbe Element aus.
Version
Syntax
CSS-Syntax für :last-of-type
:last-of-type {
css declarations;
}Beispiel für den :last-of-type-Selektor:
: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>Ansprechen von Elternelementen
Der Selektor kann auch auf Elternelemente angewendet werden.
INFO
Der *-Selektor wird implizit angenommen, wenn kein Typselektor angegeben ist (z. B. ist *:last-of-type äquivalent zu :last-of-type).
Beispiel zum Ansprechen eines Elternelements:
CSS-Pseudoklasse :last-of-type
<!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>Die Selektoren :last-child und :last-of-type weisen Ähnlichkeiten auf, haben jedoch einen Unterschied. :last-child ist sehr spezifisch und trifft nur das allerletzte Kind des Elternelements, während :last-of-type das letzte Vorkommen des angegebenen Elements trifft.
Beispiel für CSS-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>Praxis
Was stellt die CSS-Pseudoklasse :last-of-type dar?