การใช้ Negative nth-child เพื่อเลือกอีลีเมนต์ n ตัวแรก
Nuttavut Thongjor
CSS

เรียนรู้การใช้งาน Negative nth-child ว่าทำไมสูตรนี้จึงใช้เลือกอีลีเมนต์ n ตัวแรกได้ และใช้ nth-last-child เพื่อเลือก n ตัวแรกนับจากท้าย

คำอธิบาย
ความคิดเห็น

สมมติเรามี HTML ที่แสดงผลเป็นลิสต์ ดังนี้

HTML
1<ul>
2 <li>Item 1</li>
3 <li>Item 2</li>
4 <li>Item 3</li>
5 <li>Item 4</li>
6 <li>Item 5</li>
7 <li>Item 6</li>
8 <li>Item 7</li>
9 <li>Item 8</li>
10 <li>Item 9</li>
11</ul>

หากต้องการกำหนดสีตัวอักษรสามตัวแรกให้เป็นสีแดง สามารถใช้สูตรของ nth-child เป็น -n + 3 ได้ ดังนี้

CSS
1li:nth-child(-n + 3) {
2 color: red;
3}

ทำไมโค้ดชุดนี้จึงทำงานถูกต้อง?

nth-child จะเริ่มกำหนดค่า n เริ่มต้นเป็น 0 และเพิ่มค่าไปเรื่อย ๆ

n-n + 3element ที่ถูกกำหนดค่า CSS
03li ตัวที่ 3
12li ตัวที่ 2
21li ตัวที่ 1

เมื่อ n เพิ่มค่าไปถึง 3 ผลลัพธ์จาก -n + 3 จะเริ่มได้ค่าเป็น 0 และติดลบ จึงไม่มีอีลีเมนต์ไหนถูกเลือกให้แสดงผล CSS ที่กำหนดอีกต่อไป

กรณีต้องการอีลีเมนต์ n ตัวนับจากล่างสุดให้ใช้ nth-last-child แทน ดังนี้

CSS
1li:nth-last-child(-n + 3) {
2 color: red;
3}