Псевдокласс :last-child выбирает последний элемент своего родителя.
Селектор :last-of-type может быть использован в случае, если пользователь хочет выбрать и применить стиль к последнему параграфу, независимо от того, является он последним элементом или нет.
Версия
CSS3
Синтаксис
:last-child {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p:last-child {
background-color: #1c87c9;
color:#fff;
}
</style>
</head>
<body>
<h2>Пример селектора last-child</h2>
<p>Lorem Ipsum - это текст-"рыба"...</p>
<p>Lorem Ipsum - это текст-"рыба"...</p>
</body>
</html>Рассмотрим другой пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
li:last-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>Пример селектора :last-child</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 применяет стиль к последнему параграфу:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p:last-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример селектора :last-child</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |
Практикуйте свои знания
Что можно сделать с помощью псевдокласса :last-child в CSS?
Правильный!
Неправильно!