Pseudo-class nth-child
Pseudo-class nth-child เลือกองค์ประกอบ
ที่อยู่ในลำดับที่ n ของผู้ปกครอง
Syntax
cssselector:nth-child(number | odd | even | expression) {
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
| number |
จำนวนเต็มบวกเริ่มจาก 1
ระบุลำดับขององค์ประกอบที่ต้องการเลือก
การนับลำดับองค์ประกอบเริ่มจาก 1
|
odd |
องค์ประกอบลำดับคี่ |
even |
องค์ประกอบลำดับคู่ |
| expression |
สามารถสร้างนิพจน์พิเศษโดยใช้ตัวอักษร 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-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-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-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-child(3n) {
color: red;
}
Результат:
ตัวอย่าง
ใน selector สามารถระบุช่วงขององค์ประกอบได้
สมมติว่าคุณมีรายการองค์ประกอบจำนวน 20
รายการ และต้องการเลือกองค์ประกอบจากลำดับที่ 7
ถึง 14 รวมทั้งสองลำดับ ทำได้ดังนี้:
html<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>cssli:nth-child(n+7):nth-child(-n+14) {
color: red;
}
Результат: