Selector :last-child ทำงานไม่ như คาดหวังใน HTML5

ข้อจำกัดของ :last-child

:last-child เลือกเฉพาะ **ลูกสุดท้าย** ของ parent เท่านั้น **ไม่ใช่** ลูกสุดท้ายที่มี class เฉพาะ

ตัวอย่างที่ทำงาน

li:last-child { background-color: blue; }

จะทำงานก็ต่อเมื่อ <li> ตัวสุดท้ายเป็นลูกสุดท้ายของ <ul> จริงๆ

ตัวอย่างที่ไม่ทำงาน

<div>
  <a></a>
  <a>This will be selected</a>
  <span>Extra element</span> <!-- a:last-child จะไม่เลือก a ตัวที่ 2 -->
</div>

ทางเลือก: ใช้ :last-of-type หรือ JavaScript

a:last-of-type จะเลือก a ตัวสุดท้าย แม้จะมี element อื่นต่อท้าย