Псевдокласс CSS :last-child
Псевдокласс CSS :last-child выбирает элемент, если он является последним среди других дочерних элементов.
Селектор :last-of-type можно использовать, если пользователь хочет выбрать и применить стиль к последнему абзацу независимо от того, является ли он последним дочерним элементом.
INFO
Изначально выбранный элемент должен был иметь родителя. В Selectors Level 4 это больше не требуется.
Версия
Синтаксис
Синтаксис CSS :last-child
css
:last-child {
css declarations;
}Пример использования селектора :last-child:
Пример кода CSS :last-child
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>Пример последнего дочернего элемента тега <li>:
:last-child ещё один пример кода
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>Пример последнего дочернего элемента тега <p>:
:last-child второй пример кода
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>Пример использования :last-child для HTML-списков:
Пример псевдокласса CSS :last-child
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>Практика
Что представляет собой псевдокласс CSS :last-child?