nth-last-child
nth-last-child เป็นคลาสเทียมที่ใช้เลือก
องค์ประกอบที่เป็นลำดับลูกจากท้ายสุดขององค์ประกอบแม่
ทำงานคล้ายคลึงกับ nth-child
เพียงแต่การนับจะเริ่มจากท้ายสุด
รูปแบบ
cssตัวเลือก:nth-last-child(ตัวเลข | odd | even | นิพจน์) {
}
ค่าต่างๆ
| ค่า | คำอธิบาย |
|---|---|
| ตัวเลข |
ตัวเลขบวกเริ่มต้นที่ 1
ใช้ระบุลำดับขององค์ประกอบที่ต้องการเลือก
การนับลำดับองค์ประกอบเริ่มจาก 1
|
odd |
องค์ประกอบลำดับคี่ |
even |
องค์ประกอบลำดับคู่ |
| นิพจน์ |
สามารถสร้างนิพจน์พิเศษด้วยตัวอักษร n
ซึ่งแทนจำนวนเต็มทั้งหมดตั้งแต่ศูนย์ (ไม่ใช่หนึ่ง)
ถึงอนันต์ ดังนั้น 2n หมายถึงทุกๆเลขคู่
(เริ่มจากลำดับที่สอง)
เข้าใจได้อย่างไร? ให้แทนค่า n ด้วยลำดับ
ตัวเลขจาก 0 ไปเรื่อยๆ: ถ้า n = 0 แล้ว 2n จะได้ 0 -
ซึ่งไม่มีองค์ประกอบนั้น (ลำดับองค์ประกอบเริ่มจาก 1)
ถ้า n = 1 แล้ว 2n จะได้ 2 - องค์ประกอบลำดับที่สอง, ถ้า n = 2,
2n ได้ 4 - องค์ประกอบลำดับที่สี่ ถ้าเขียน 3n - นั่นคือ
ทุกๆองค์ประกอบลำดับที่สาม (เริ่มจากลำดับที่สาม) และต่อๆไป
|
ตัวอย่าง
ในตัวอย่างนี้เราจะทำให้สีแดง
เฉพาะ li ที่เป็นลำดับที่ 4 จากท้ายสุด
ขององค์ประกอบแม่:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(4) {
color: red;
}
Результат:
ตัวอย่าง
ตอนนี้เราจะทำให้ทั้งหมด
เป็นสีแดงสำหรับ li ลำดับคู่จากท้ายสุด:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(even) {
color: red;
}
Результат:
ตัวอย่าง
ตอนนี้เราจะทำให้ทั้งหมดเป็นสีแดงสำหรับ
li ลำดับคี่จากท้ายสุด:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(odd) {
color: red;
}
Результат:
ตัวอย่าง
ตอนนี้เราจะทำให้ทุกๆลำดับที่สาม
จากท้ายสุดของ li เป็นสีแดง:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(3n) {
color: red;
}
Результат: