nth-last-child

nth-last-child เป็นคลาสเทียมที่ใช้เลือก องค์ประกอบที่เป็นลำดับลูกจากท้ายสุดขององค์ประกอบแม่ ทำงานคล้ายคลึงกับ nth-child เพียงแต่การนับจะเริ่มจากท้ายสุด

รูปแบบ

ตัวเลือก: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 จากท้ายสุด ขององค์ประกอบแม่:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

ตัวอย่าง

ตอนนี้เราจะทำให้ทั้งหมด เป็นสีแดงสำหรับ li ลำดับคู่จากท้ายสุด:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

ตัวอย่าง

ตอนนี้เราจะทำให้ทั้งหมดเป็นสีแดงสำหรับ li ลำดับคี่จากท้ายสุด:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

ตัวอย่าง

ตอนนี้เราจะทำให้ทุกๆลำดับที่สาม จากท้ายสุดของ li เป็นสีแดง:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}