ทำความเข้าใจกับตัวเลือก CSS :nth-child()

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

เช่นเดียวกับตัวเลือก CSS ทั้งหมด คุณสามารถใช้ :nth-child() เพื่อระบุองค์ประกอบในหน้าเว็บและนำสไตล์ไปใช้กับองค์ประกอบเหล่านั้น แต่ตัวเลือกนี้ช่วยให้คุณจำกัดกลุ่มพี่น้องให้แคบลงตามตำแหน่งที่สัมพันธ์กัน

MUO วิดีโอประจำวันนี้ เลื่อนเพื่อดำเนินการต่อด้วยเนื้อหา

ตัวเลือกสนับสนุนคำสำคัญพื้นฐานบางคำสำหรับกรณีทั่วไป แต่ยังให้ไวยากรณ์การจับคู่รูปแบบที่มีประสิทธิภาพอีกด้วย เมื่อใช้มัน คุณสามารถเลือกองค์ประกอบตามรูปแบบปกติ รูปแบบที่ซ้ำกัน หรือคำจำกัดความที่ซับซ้อนมากขึ้น ตามความต้องการของคุณ

---

---

ไวยากรณ์ตัวเลือก :nth-child()

ในฐานะที่เป็น ตัวเลือกคลาสหลอก CSS ไวยากรณ์ :nth-child() แตกต่างจากตัวเลือกอื่นๆ ใช้อาร์กิวเมนต์เป็นรูปแบบสำหรับการจับคู่องค์ประกอบในชุดพี่น้อง:

ทำไมตอนนี้การ์ดจอถึงแพงจัง

 :nth-child(args) { 
    /*...*/ 
}

จุดสนใจหลักอยู่ที่ข้อโต้แย้งในวงเล็บ อาร์กิวเมนต์เหล่านี้กำหนดชุดย่อยขององค์ประกอบที่จะเลือก

การใช้ค่าคำหลักสำหรับกรณีทั่วไป

ตัวเลือกนี้สามารถรองรับค่าคำหลักได้สองค่า: แปลก และ สม่ำเสมอ . มีประโยชน์อย่างยิ่งสำหรับ การจัดรูปแบบแถวสลับกันในตาราง .

รายการเรียงลำดับแบบง่ายเป็นอีกตัวอย่างที่ดีของเวลาที่คุณอาจใช้ค่าคำหลักเหล่านี้:

 <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

ใช้ :ลูกคนที่ n (คี่) ตัวเลือก คุณสามารถเปลี่ยนสีของแต่ละรายการสำรองได้:

---

---

 :nth-child(odd) { 
    color: red; 
}

รายการเริ่มต้นที่ดัชนี 1 ดังนั้นรายการแรกจะปรากฏเป็นสีแดง จากนั้นรายการที่สามจะเป็นดังนี้:

สัญกรณ์การทำงานเพื่อความยืดหยุ่นที่มากขึ้น

คุณสามารถใช้จำนวนเต็มเพียงตัวเดียวเพื่อเลือกองค์ประกอบแต่ละรายการได้ เช่นนี้

---

---

 li:nth-child(4) { 
    color: red; 
}

ในกรณีนี้ ตัวเลือกจะจับคู่เฉพาะรายการที่สี่ในรายการ:

ไวยากรณ์นี้เป็นกรณีพิเศษของไวยากรณ์การทำงานทั่วไปซึ่งเลือกรายการที่ตรงกับรูปแบบที่กำหนด ไวยากรณ์นี้คือ:

 :nth-child(An+B) { 
    /*...*/ 
}

ในสัญกรณ์นี้ ก คือขนาดขั้นบันได นี่หมายถึงจำนวนครั้งที่ตัวเลือกเลื่อนเพื่อเลือกรายการถัดไป ช่วยให้คุณสามารถเลือกรายการอื่นๆ ทุกรายการ ทุกรายการที่สาม ฯลฯ บี เป็นจุดเริ่มต้นที่การเลือกเริ่มต้นขึ้น

ตัวอย่างเช่น ใช้อาร์กิวเมนต์ 3n+1:

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

สิ่งนี้จะเริ่มต้นการเลือกที่รายการแรกและดำเนินการต่อทุก ๆ สามรายการหลังจากนั้น:

เปรียบเทียบสิ่งนี้กับนิพจน์ 3n+2:

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

ซึ่งยังคงเลือกทุก ๆ รายการที่สาม แต่ตอนนี้จะเริ่มต้นจากรายการที่สองในรายการ:

อีกตัวอย่างที่น่าสนใจคือ :nth-child(n+3):

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

อันนี้จะเลือกทุกรายการ (n) เริ่มจากอันที่สาม (+3) มันจะมีลักษณะเช่นนี้:

คุณยังสามารถใช้การลบเพื่อให้ได้ผลลัพธ์บางอย่าง:

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

ตัวอย่างนี้ยังคงเลือกทุก ๆ รายการที่สาม แต่เริ่มจาก 'ลบก่อน' ซึ่งหมายความว่าจะเลือกรายการที่สองในรายการ จากนั้นเลือกรายการที่ห้า และอื่นๆ:

ไวยากรณ์ของ

คุณยังสามารถใช้คำหลักได้ ของ ตามด้วยก ตัวเลือก เป็นอาร์กิวเมนต์ในตัวเลือก :nth-child() ไวยากรณ์นี้ช่วยให้คุณจำกัดรายการที่เป็นไปได้ที่รูปแบบปกติเลือกให้แคบลง

วิธีการลบ hiberfil.sys windows 10

ตัวอย่างเช่น จินตนาการว่ามาร์กอัปของคุณซับซ้อนกว่าต้นฉบับ:

 <ol> 
    <li class="old">Item 1</li> 
    <li class="new">Item 2</li> 
    <li class="new">Item 3</li> 
    <li class="old">Item 4</li> 
    <li class="new">Item 5</li> 
    <li class="new">Item 6</li> 
    <li class="new">Item 7</li> 
</ol>

ตอนนี้ ใช้ :nth-child เพื่อเลือกรายการคู่จากชุดของรายการที่มีคลาสเฉพาะ:

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.new) { 
    color: red; 
}

สังเกตว่าเฉพาะรายการที่เป็นตัวหนาที่เป็นเลขคู่เท่านั้นที่เป็นสีแดง:

ลองพิจารณาดูว่าสิ่งนี้แตกต่างอย่างไร li.new:nth-child(คู่) ซึ่งกำหนดเป้าหมายองค์ประกอบ .new แต่ถ้าเป็นองค์ประกอบเดียวกันเท่านั้น นี่จะเป็นรายการที่ 2 และ 6 ในตัวอย่างข้างต้น

การทำงานกับตัวเลือก :nth-child()

คุณสามารถออกแบบให้มีเอกลักษณ์เฉพาะตัวได้โดยใช้ตัวเลือก :nth-child() คุณสามารถสร้างเว็บไซต์ที่มีสีสันและเน้นแถวและคอลัมน์ในตารางข้อมูลได้ เมื่อใช้ร่วมกับตัวเลือก CSS อื่นๆ จะช่วยให้คุณสร้างเลย์เอาต์และการออกแบบที่ซับซ้อนได้