:last-of-type

Содержание

Псевдокласс :last-of-type задаёт правила стилей для последнего элемента в списке дочерних элементов своего родителя. К примеру, добавление :last-of-type к селектору li устанавливает стиль только для последнего пункта списка, при этом не распространяется на остальные пункты.

Синтаксис

Селектор:last-of-type { ... }

Пример

<!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.

Результат использования псевдокласса :last-of-type

Рис. 1. Результат использования псевдокласса :last-of-type

Спецификация

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
919.53.23.5
AndroidFirefox MobileOpera MobileSafari Mobile
2.11103.2




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 3:17 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru