Pseudoklasa CSS :last-of-type reprezentuje ostatni element określonego typu spośród grupy elementów siostrzanych, tzn. znajdujących się na tym samym poziomie drzewa dokumentu.
Przykład użycia :last-of-type
W tym przykładzie czerwony kolor będzie miało słowo tekstu.
<style>
span:last-of-type {color: red}
</style>
…
<div>
<p>Akapit <span>bardzo</span> ciekawego <span>tekstu</span>.</p>
</div>:last-child vs :last-of-type
Pseudoklasa :last-child odnosi się do elementu określonego typu, który jest ostatnim dzieckiem innego elementu, natomiast pseudoklasa :last-of-type odnosi się do ostatniego elementu określonego typu będącego dzieckiem innego elementu (po nim mogą znajdować się jeszcze inne elementy siostrzane), np.:
<style>
span:last-child {color: red}
</style>
…
<div>
<p><span>Akapit</span> ciekawego <span>tekstu</span>, który jest <strong>ważny</strong>.</p>
</div>W tym przypadku pseudoklasa :last-child nie wybierze żadnego elementu span. A teraz spójrz na poniższy przykład:
<style>
span:last-of-type {color: red}
</style>
…
<div>
<p><span>Akapit</span> ciekawego <span>tekstu</span>, który jest <strong>ważny</strong>.</p>
</div>W tym przypadku słowo tekstu będzie czerwone.
Składnia :last-of-type
Składnia pseudoklasy :last-of-type:
:last-of-type {...}