Selektor :last-of-type odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :last-of-type.
Cechy elementu HTML spełniają zasadę pseudoklasy :last-of-type, gdy w danym momencie dany element HTML jest ostatnim elementem swojego typu względem ewentualnych pozostałych elementów dzieci należących do wspólnego elementu rodzica.
Informacje techniczne o selektorze :last-of-type
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor :last-of-type
p:last-of-type{color:red;}
Wyjaśnienie przykładowej reguły CSS
p:last-of-type{color:red;}
p:last-of-type
do każdego elementu p, który jest ostatnim elementem typu p względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
p:last-of-type {
color:red;
}
</style>
</head>
<body>
<div>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
</p>
</div>
<hr>
<div>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
</p>
<div>
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest ostatnim elementem typu "div"
</div>
</div>
</body>
</html>
