jQuery :nth-last-child()ตัวเลือก
ตัวอย่าง
เลือกแต่ละองค์ประกอบ <p> ที่เป็นลูกคนที่สามของพาเรนต์ นับจากลูกสุดท้าย:
$("p:nth-last-child(3)")
ความหมายและการใช้งาน
ตัวเลือก :nth-last-child( n ) จะเลือกองค์ประกอบทั้งหมดที่เป็นลูกที่nโดยไม่คำนึงถึงประเภทของพาเรนต์ นับจากลูกสุดท้าย
เคล็ดลับ:ใช้ตัวเลือก:nth-last-of-type()เพื่อเลือกองค์ประกอบทั้งหมดที่เป็นลูกที่n ของประเภทเฉพาะของผู้ปกครอง นับจากลูกคนสุดท้าย
ไวยากรณ์
:nth-last-child(n|even|odd|formula)
| Parameter | Description |
|---|---|
| n | The index of each child to match. Must be a number. The first element has the index number 1. |
| even | Selects each even child element |
| odd | Selects each odd child element |
| formula | Specifies which child element(s) to be selected with a formula (an + b). Example: p:nth-last-child(3n+2) selects each 3rd paragraph, starting at the last 2nd child |
ลองด้วยตัวคุณเอง - ตัวอย่าง
วิธีเลือกองค์ประกอบ <p> ที่เป็นลูกคนแรกขององค์ประกอบ <div> ทั้งหมด โดยนับจากลูกสุดท้าย
วิธีใช้สูตร ( an + b ) เพื่อเลือกองค์ประกอบย่อยต่างๆ นับจากลูกสุดท้าย
วิธีใช้คู่และคี่เพื่อเลือกองค์ประกอบย่อยที่แตกต่างกัน นับจากลูกสุดท้าย
ความแตกต่างระหว่าง p:nth-child(2), p :nth-last-child(2), p:nth-of-type(2) และ p:nth-of-last-type(2)