พีวโดคลาส nth-last-of-type

พีวโดคลาส nth-last-of-type เลือก องค์ประกอบ ซึ่งเป็นลำดับที่ n ของลูก ของประเภทที่กำหนดของแม่ นับจากท้าย มีพฤติกรรมคล้ายกับ nth-of-type เพียงแต่การนับจะเริ่มจากท้าย

โครงสร้าง

ตัวเลือก:nth-last-of-type(ตัวเลข | odd | even | นิพจน์) {
	
}

ค่า

ค่า	คำอธิบาย
ตัวเลข	จำนวนเต็มบวกเริ่มจาก `1` กำหนดลำดับขององค์ประกอบที่เราต้องการ เข้าถึง การนับลำดับองค์ประกอบเริ่มจาก `1`
`odd`	องค์ประกอบลำดับคี่
`even`	องค์ประกอบลำดับคู่
นิพจน์	สามารถเขียนนิพจน์พิเศษด้วยตัวอักษร n ซึ่งหมายถึงจำนวนเต็มทั้งหมดตั้งแต่ศูนย์ (ไม่ใช่หนึ่ง) ถึงอนันต์ ดังนั้น `2n` - หมายถึงทุกเลขคู่ (เริ่มจากลำดับที่สอง) เข้าใจได้อย่างไร? แทนค่าใน `n` เป็นลำดับ ตัวเลขตั้งแต่ `0` เป็นต้นไป: ถ้า n = 0 แล้ว 2n จะได้ 0 - ไม่มีองค์ประกอบดังกล่าว (ลำดับองค์ประกอบเริ่มจาก 1) ถ้า n = 1 แล้ว 2n จะได้ 2 - องค์ประกอบลำดับที่สอง, ถ้า n = 2, 2n ให้ 4 - องค์ประกอบลำดับที่สี่ ถ้าเขียน 3n - นี่ จะเป็นทุกองค์ประกอบลำดับที่สาม (เริ่มจากลำดับที่สาม) และอื่นๆ

ตัวอย่าง

หาองค์ประกอบ h2 ซึ่งเป็น 2-th h2 ในแม่ นับจากท้าย:

<div>
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-last-of-type(2) {
	color: red;
}

ตัวอย่าง

หา h2 ลำดับคู่ทั้งหมด นับจากท้าย:

<div>
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-last-of-type(even) {
	color: red;
}

ตัวอย่าง

หา h2 ลำดับคี่ทั้งหมด นับจากท้าย:

<div>
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวข้อ</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-last-of-type(odd) {
	color: red;
}