พีวโดคลาส nth-last-of-type
พีวโดคลาส nth-last-of-type เลือก
องค์ประกอบ ซึ่งเป็นลำดับที่ n ของลูก
ของประเภทที่กำหนดของแม่ นับจากท้าย
มีพฤติกรรมคล้ายกับ nth-of-type
เพียงแต่การนับจะเริ่มจากท้าย
โครงสร้าง
cssตัวเลือก: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
ในแม่ นับจากท้าย:
html<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>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
ตัวอย่าง
หา h2 ลำดับคู่ทั้งหมด นับจากท้าย:
html<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>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
ตัวอย่าง
หา h2 ลำดับคี่ทั้งหมด นับจากท้าย:
html<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>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: