| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.5+ | 2.1+ | 2.0+ |
Коротка інформація
| Застосовується | До всіх елементів |
|---|---|
| Посилання на специфікацію | http://www.w3.org/TR/css3-selectors/#last-of-type-pseudo |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Псевдоклас :last-of-type встановлює правила стилів для останнього елемента у списку дочірніх елементів його батька. Наприклад, додавання :last-of-type до селектору li встановлює стиль лише для останнього пункту списку, не поширюючись на інші пункти.
Синтаксис
елемент:last-of-type { ... }
Значення
Немає.
Приклад
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>last-of-type</title>
<style>
p:last-of-type:after {
content: " ◄"; /* Додаємо символ в кінці тексту */
color: #c00000; /* Колір символа */
}
</style>
</head>
<body>
<p>Цей стародавній скандинавський напій прийшов до нас з давніх часів і
воспіваний у багатьох піснях. Тепер ви самостійно можете приготувати
його та насолодитися дивовижним смаком та ароматом легендарного нектару.</p>
<p>...</p>
<p>Залишилося додати хліву та хрольву, щоб напій був готовий.
Подавати гарячим.</p>
</body>
</html>У цьому прикладі до останнього абзацу тексту додається спеціальний символ червоного кольору. Результат прикладу показано на малюнку 1.
Мал. 1. Результат використання псевдокласу :last-of-type