CSS :nth-of-type()ตัวเลือก
ตัวอย่าง
ระบุสีพื้นหลังสำหรับทุกองค์ประกอบ <p> ที่เป็นองค์ประกอบ p ที่สองขององค์ประกอบหลัก:
p:nth-of-type(2)
{
background: red;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ตัวเลือกจะจับคู่ทุกองค์ประกอบที่เป็นลูกที่nของประเภทเฉพาะ ของพาเรนต์:nth-of-type(n)
nอาจเป็นตัวเลข คีย์เวิร์ด หรือสูตรก็ได้
เคล็ดลับ:ดูที่ตัวเลือก:nth-child()เพื่อเลือกองค์ประกอบที่เป็นลูกที่n โดยไม่คำนึงถึงประเภทของพาเรนต์
รุ่น: | CSS3 |
---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนตัวเลือกอย่างสมบูรณ์
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
ไวยากรณ์ CSS
:nth-of-type(number) {
css declarations;
}
ตัวอย่างเพิ่มเติม
ตัวอย่าง
คี่และคู่เป็นคำหลักที่สามารถใช้เพื่อจับคู่องค์ประกอบย่อยที่มีดัชนีเป็นเลขคี่หรือคู่ (ดัชนีของลูกคนแรกคือ 1)
ที่นี่ เราระบุสีพื้นหลังที่แตกต่างกันสองสีสำหรับองค์ประกอบ p คี่และคู่:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
ตัวอย่าง
โดยใช้สูตร ( an + b ) คำอธิบาย: aแทนขนาดไซเคิลnคือตัวนับ (เริ่มต้นที่ 0) และbคือค่าออฟเซ็ต
ที่นี่ เราระบุสีพื้นหลังสำหรับองค์ประกอบ p ทั้งหมดที่มีดัชนีเป็นทวีคูณของ 3:
p:nth-of-type(3n+0)
{
background: red;
}