Re-Implementing :nth-child() With Modern CSS: เจาะลึกวิธีจำลองตัวเลือก
เรียนรู้วิธีจำลองตัวเลือก :nth-child() ด้วยฟีเจอร์ใหม่ใน CSS อย่าง if() และ mod() พร้อมตัวอย่างการประยุกต์ใช้งานจาก CSS-Tricks
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การจำลอง :nth-child() ช่วยให้ปรับแต่งค่าตัวแปรได้ทันทีแบบไดนามิก
- ใช้งานฟังก์ชันใหม่ if() และ mod() ร่วมกับการคำนวณทางคณิตศาสตร์
- ครอบคลุมรูปแบบตั้งแต่ :nth-child(B) ไปจนถึงสูตรทั่วไป :nth-child(An + B)
- เป็นแนวทางศึกษาฟีเจอร์ CSS สมัยใหม่เพื่อต่อยอดการพัฒนาเว็บ
การสร้างสรรค์สิ่งที่มีอยู่แล้วในระบบอาจดูเป็นเรื่องแปลกในตอนแรก แต่การจำลองการทำงานของตัวเลือก :nth-child() ขึ้นมาใหม่ด้วย CSS สมัยใหม่นั้นมีเหตุผลหลักสองประการ คือความสามารถในการปรับแต่งอาร์กิวเมนต์ได้ทันทีขณะใช้งาน และการได้ทดลองเล่นกับฟีเจอร์ใหม่ๆ ที่สนุกสนาน แม้ว่าในทางปฏิบัติจริงคุณอาจจะไม่จำเป็นต้องพึ่งพาตัวเลือก :nth-child() แบบไดนามิกนี้บ่อยนัก แต่รับรองว่าจะได้เทคนิคที่มีประโยชน์ติดตัวไปอย่างแน่นอน
โครงสร้างตัวอย่างทั้งหมดจะใช้คอนเทนเนอร์ที่มี element
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อขยับมาสู่รูปแบบที่ซับซ้อนขึ้นอย่าง :nth-child(n + B) หรือ :nth-child(-n + B) หลักการจะใกล้เคียงกันโดยใช้เครื่องหมายมากกว่าหรือเท่ากับ และน้อยกว่าหรือเท่ากับเข้ามาเปรียบเทียบ ส่วนกรณีที่มีตัวแปร A เข้ามาเกี่ยวข้อง เช่น :nth-child(3n) ซึ่งเลือกตัวเลือกที่ 3, 6, 9 ไปเรื่อยๆ จะต้องอาศัยฟังก์ชัน mod() เข้ามาช่วยตรวจสอบว่าเศษจากการหาร index ด้วยตัวเลข A นั้นเป็น 0 หรือไม่ เพื่อคัดกรองพหุกูณที่ต้องการ
การใช้ฟังก์ชันใหม่ๆ เช่น if() และ mod() ใน CSS ถือเป็นก้าวสำคัญที่ทำให้ภาษา Styling มีความสามารถใกล้เคียงกับภาษาโปรแกรมมิ่งทั่วไปมากขึ้น การผสมผสานตัวแปรเข้ากับเงื่อนไขช่วยลดข้อจำกัดในการเขียนโค้ดแบบเดิมๆ แต่ในขณะเดียวกัน นักพัฒนาต้องระมัดระวังเรื่องขอบเขตของข้อมูล เช่น ค่าติดลบที่อาจทำให้ฟังก์ชัน mod() คืนค่า 0 ผิดพลาดได้ ซึ่งต้องมีการเขียนเงื่อนไขตรวจสอบเครื่องหมายเพิ่มเติม
สำหรับการผสมผสานในรูปแบบทั่วไป :nth-child(An + B) สูตรการคำนวณจะเปลี่ยนเป็น n = (index - B)/A โดยเงื่อนไขสำคัญคือค่า n ต้องเป็นจำนวนเต็มบวกหรือศูนย์ และ (index - B) ต้องหารด้วย A ลงตัว ซึ่งสามารถแปลเป็นชุดคำสั่ง CSS ที่ซับซ้อนขึ้นพร้อมกับการจัดการกรณีที่ตัวแปร A เป็นศูนย์เพื่อป้องกันข้อผิดพลาดในการแสดงผล
"What about :nth-last-child()? If you are up for another challenge, try to see how you can update the previous implementation to make it work with :nth-last-child()."
CSS-Tricks
บทความนี้เป็นตัวอย่างที่ดีในการสำรวจความสามารถของฟีเจอร์ if() และการประยุกต์ใช้กับตัวเลือก :nth-child() ซึ่งเปรียบเสมือนชุดเงื่อนไขในการกรอง element ให้ได้ตามต้องการ สำหรับผู้ที่สนใจความท้าทายเพิ่มเติม สามารถลองนำแนวคิดเหล่านี้ไปปรับใช้กับ :nth-last-child() โดยอาศัยฟังก์ชัน sibling-count() เป็นโจทย์ฝึกฝนต่อไปได้
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น