บทบาทของ CSS :last-of-type Selector

ใช้ :last-of-type เพื่อจัดสไตล์ <p> ตัวสุดท้ายของ Parent (นับเฉพาะ Tag <p> เท่านั้น)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        p:last-of-type {
            background: orange;
        }
    </style>
</head>
<body>
    <h2>Heading</h2>
    <p>This is demo text1.</p>
    <p>This is demo text2.</p>
    <p>This is demo text3.</p>
</body>
</html>

ต่างจาก :last-child: :last-child ต้องเป็นลูกคนสุดท้ายของ Parent ทุกประเภท ส่วน :last-of-type เป็น Tag นั้นๆ ตัวสุดท้ายเท่านั้น