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

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

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

ไวยากรณ์ตัวเลือก: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> 

เมื่อใช้ตัวเลือก :nth-child(odd) เราสามารถปรับเปลี่ยนสีของรายการถัดไปด้วยดัชนีคี่:

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

รายการจะมีหมายเลขกำกับไว้ตั้งแต่ 1 โดยรายการเริ่มต้นจะแสดงเป็นสีแดง ตามด้วยรายการที่สาม และรายการที่สามต่อจากนั้นทุกรายการ

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

เราอาจใช้จำนวนเต็มบวกเดี่ยวๆ เพื่อเลือกส่วนประกอบเฉพาะโดยใช้งานดังนี้

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

ในกรณีนี้ ตัวเลือกจะใช้เฉพาะกับองค์ประกอบที่สี่ภายในรายการที่ให้ไว้:

ตัวอย่างไวยากรณ์เฉพาะนี้เกี่ยวข้องกับการเลือกองค์ประกอบตามรูปแบบเฉพาะ และอยู่ภายใต้หมวดหมู่ที่กว้างกว่าของไวยากรณ์การทำงานที่ทำหน้าที่นี้

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

ในสัญลักษณ์เฉพาะนี้ เราแสดงด้วย"A"ซึ่งเป็นขนาดส่วนเพิ่มหรือขั้นตอน ซึ่งระบุความถี่ที่ตัวเลือกเลื่อนไปเพื่อเลือกรายการถัดไป ด้วยวิธีนี้ เราสามารถเลือกเลือกรายการในช่วงเวลาปกติได้ เช่น รายการอื่นๆ ทุกรายการหรือทุกรายการที่สาม เป็นต้น ในทางกลับกัน “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;
} 

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

อาจใช้กระบวนการลบเพื่อให้ได้ผลลัพธ์ที่เฉพาะเจาะจงเช่นกัน

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

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

ของไวยากรณ์

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

พิจารณาสถานการณ์ที่มาร์กอัปมีความซับซ้อนเมื่อเทียบกับเวอร์ชันเริ่มต้น:

 <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> 

หากต้องการกำหนดเป้าหมายองค์ประกอบด้วยคลาสเฉพาะและเลือกทุก ๆ วินาทีภายในกลุ่มนั้นโดยใช้ CSS เราสามารถใช้คลาสหลอก “:nth-child” ร่วมกับตัวเลือกคลาสที่ต้องการได้ ช่วยให้สามารถเลือกและแก้ไของค์ประกอบเฉพาะได้อย่างแม่นยำโดยอิงตามตำแหน่งภายในลำดับขององค์ประกอบที่ตรงกัน

 .new {
    font-weight: bold;
}

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

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

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

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

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