เลือกองค์ประกอบสุดท้ายที่สองด้วย css

ฉันรู้แล้วว่า: ลูกคนสุดท้าย แต่มีวิธีเลือก div ไหม:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

หมายเหตุ: ไม่มี jQuery เฉพาะกับ CSS

ใน CSS3 คุณมี:

:nth-last-child(2)

ดู: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-childการสนับสนุนเบราว์เซอร์:

• Chrome 2
• Firefox 3.5
• Opera 9.5, 10
• Safari 3.1, 4
• Internet Explorer 9

หมายเหตุ:โพสต์คำตอบนี้เนื่องจาก OP ระบุในความคิดเห็นในภายหลังว่าต้องเลือกสององค์ประกอบสุดท้ายไม่ใช่แค่องค์ประกอบที่สองถึงสุดท้าย

:nth-childเลือก CSS3 ในความเป็นจริงความสามารถมากขึ้นกว่าที่คุณเคยคิด!

ตัวอย่างเช่นสิ่งนี้จะเลือก 2 องค์ประกอบสุดท้ายของ#container:

#container :nth-last-child(-n+2) {}

แต่นี่เป็นเพียงจุดเริ่มต้นของมิตรภาพที่สวยงาม

• :nth-child รองรับเบราว์เซอร์

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>