CSS3 :nth-child() Selector

ระบุสีพื้นหลังสำหรับทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของแม่:

p:nth-child(2) {
background: #ff0000;
}

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

:nth-child( n ) เลือกตรงกับองค์ประกอบที่เป็นทุก n TH เด็กไม่คำนึงถึงประเภทของแม่

n ได้จำนวนคำหลักหรือสูตร

Tip: ดูที่ : ที่ n ของประเภท () เลือกเพื่อเลือกองค์ประกอบที่เป็น n TH เด็ก of a particular type ของผู้ปกครอง

เวอร์ชัน:	CSS3

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่เลือก

ผู้เลือก
:nth-child()	4.0	9.0	3.5	3.2	9.6

:nth-child( number ) {
css declarations ;
} Demo

คี่และเป็นคำหลักที่สามารถนำมาใช้เพื่อให้ตรงกับองค์ประกอบของเด็กที่มีดัชนีเป็นเลขคี่หรือแม้กระทั่ง (the index of the first child is 1)

ที่นี่เราระบุสองสีพื้นหลังที่แตกต่างกันสำหรับองค์ประกอบคี่และ P:

p:nth-child(odd) {
background: #ff0000;
}

p:nth-child(even) {
background: #0000ff;
}

โดยใช้สูตร ( an + b ) คำอธิบาย: หมายถึงขนาดวงจร, a n เป็นเคาน์เตอร์ (starts at 0) และ b เป็นค่าชดเชย

ที่นี่เราระบุสีพื้นหลังสำหรับองค์ประกอบ P ทุกรายที่มีดัชนีมีหลายที่ 3:

p:nth-child(3n+0) {
background: #ff0000;
}