Pseudoklasa :nth-last-of-type() działa podobnie jak opisana powyżej pseudoklasa :nth-of-type(), z tą różnicą, że liczenie ściśle określonych elementów odbywa się od końca, a nie od początku, jak to miało miejsce poprzednio. Oczywiście również tutaj pomiędzy nawiasami możemy stosować numery, słowa kluczowe lub formuły.
H1:nth-last-child(odd)
{
color:red;
font-style:italic;
font-weight:bolder;
}
Poniżej zamieszczam przykład działania pseudoklasy :nth-last-of-type() w odniesieniu do tego samego elementu, który widać na rysunku 15.4. Jak łatwo się domyślić, tym razem formatowanie zacznie się od końca.
<<przykład>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
P:nth-last-of-type(even)
{
color:red;
font-style:italic;
font-weight:bolder;
}
H1:nth-last-of-type(odd)
{
color:green;
}
}
</style>
</head>
<body>
<div class="przyklad">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>
</div>
</body>
</html>
<</przykład>>
Podobnie jak pseudoklasa :nth-of-type (), również :nth-last-of-type () nie działa w przeglądarce Internet Explorer.
