สมมติเรามี 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 ได้ ดังนี้

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

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

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

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

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

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