CSS :last-child-Pseudoklasse
Die CSS-Pseudoklasse :last-child wählt ein Element aus, wenn es das letzte Kind unter seinen Geschwisterelementen ist.
Der Selektor :last-of-type kann verwendet werden, wenn der Stil auf das letzte Absatz-Element angewendet werden soll, unabhängig davon, ob es das letzte Kind ist oder nicht.
INFO
Ursprünglich musste das ausgewählte Element ein Elternelement haben. In Selectors Level 4 ist dies nicht mehr erforderlich.
Version
Syntax
CSS :last-child-Syntax
css
:last-child {
css declarations;
}Beispiel für den :last-child-Selektor:
CSS :last-child-Codebeispiel
html
<!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>Beispiel für das letzte Kind des <li>-Tags:
:last-child weiteres Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
}
</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>Beispiel für das letzte Kind des <p>-Tags:
:last-child zweites Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
}
</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>Beispiel für :last-child bei HTML-Listen:
Beispiel für die CSS :last-child-Pseudoklasse
html
<!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>Praxis
Was stellt die CSS-Pseudoklasse :last-child dar?