ควบคุมการเลือก :nth-child() ได้มากขึ้นด้วยไวยากรณ์ S

กรองชุดองค์ประกอบย่อยล่วงหน้าก่อนใช้ตรรกะ An+B กับองค์ประกอบนั้น

Bramus

ตัวเลือก:nth-child()และ:nth-last-child()คลาสเสมือน

ตัวเลือก:nth-child()คลาสเสมือนช่วยให้เลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้An+Bรูปแบบย่อจะช่วยให้คุณควบคุมองค์ประกอบที่ต้องการเลือกได้อย่างละเอียด

• :nth-child(2): เลือกบุตรหลานคนที่ 2
• :nth-child(2n): เลือกทุกแถวที่เป็นเลขคู่ (แถวที่ 2, 4, 6, 8 และอื่นๆ)
• :nth-child(2n+1): เลือกบุตรหลานที่เป็นเลขคี่ทั้งหมด (คนที่ 1, 3, 5, 7 และอื่นๆ)
• :nth-child(5n+1): เลือกองค์ประกอบย่อยที่ 1 (=(5×0)+1), 6 (=(5×1)+1), 11 (=(5×2)+1), …
• :nth-child(5n+2): เลือกบุตรคนที่ 2 (=(5×0)+2), 7 (=(5×1)+2), 12 (=(5×2)+2), …

แต่คุณสามารถเลือกครีเอทีฟโฆษณาได้มากขึ้นหากละเว้นพารามิเตอร์ A เช่น

• :nth-child(n+3): เลือกบุตรหลานทุกคนตั้งแต่คนที่ 3 ขึ้นไป (คนที่ 3, 4, 5 และอื่นๆ)
• :nth-child(-n+5): เลือกเด็กทุกคนจนถึงคนที่ 5 (คนที่ 1, 2, 3, 4, 5)

รวม:nth-child()การเลือกเหล่านี้เข้าด้วยกันเพื่อเลือกช่วงขององค์ประกอบ

• :nth-child(n+3):nth-child(-n+5): เลือกบุตรหลานทุกคนตั้งแต่คนที่ 3 ไปจนถึงคนที่ 5 (คนที่ 3, 4, 5)

การใช้ :nth-last-child() จะช่วยให้คุณเลือกในลักษณะเดียวกันได้ แต่แทนที่จะเริ่มนับจากจุดเริ่มต้น คุณจะเริ่มนับจากจุดสิ้นสุด

การเลือกการกรองล่วงหน้าด้วยไวยากรณ์ of S

ความสามารถในการส่งรายการตัวเลือกไปยัง :nth-child() และ :nth-last-child() โดยไม่บังคับเป็นฟีเจอร์ใหม่ใน CSS Selectors ระดับ 4

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

เมื่อระบุ of S ระบบจะใช้ตรรกะ An+B กับองค์ประกอบที่ตรงกับรายการตัวเลือกที่ระบุเท่านั้น S ซึ่งหมายความว่าคุณสามารถกรองเด็กๆ ล่วงหน้าก่อนที่ An+B จะทำงาน

ตัวอย่าง

เช่น :nth-child(2 of .highlight) จะเลือกองค์ประกอบที่ตรงกันรายการที่ 2 ซึ่งมีคลาส .highlight กล่าวอีกนัยหนึ่งคือ จากเด็กทั้งหมดที่มีคลาส .highlight ให้เลือกคนที่ 2

ซึ่งแตกต่างจาก .highlight:nth-child(2) ซึ่งเลือกองค์ประกอบที่มีคลาส .highlight และเป็นองค์ประกอบย่อยที่ 2 ด้วย

คุณจะเห็นความแตกต่างนี้ในการสาธิตด้านล่าง

• องค์ประกอบที่ตรงกับ :nth-child(2 of .highlight) จะมีเส้นขอบสีชมพู
• องค์ประกอบที่ตรงกับ .highlight:nth-child(2) จะมีโครงร่างสีเขียว

โปรดทราบว่า S คือรายการตัวเลือก ซึ่งหมายความว่ายอมรับตัวเลือกหลายรายการที่คั่นด้วยคอมมา เช่น :nth-child(4 of .highlight, .sale) จะเลือกองค์ประกอบที่ 4 ซึ่งเป็น .highlight หรือ .sale จากชุดองค์ประกอบที่อยู่ระดับเดียวกัน

ในการสาธิตด้านล่าง องค์ประกอบที่ตรงกับ :nth-child(4 of .highlight, .sale) จะมีเส้นขอบสีส้ม

การสลับแถวของตาราง

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

tr:nth-child(even) {
  background-color: lightgrey;
}

แม้ว่าวิธีนี้จะใช้ได้ดีกับตารางแบบคงที่ แต่จะเกิดปัญหาเมื่อคุณเริ่มกรองเนื้อหาตารางแบบไดนามิก เช่น เมื่อซ่อนแถวที่ 2 คุณจะเห็นแถวที่ 1 และ 3 โดยแต่ละแถวจะมีสีพื้นหลังเดียวกัน

หากต้องการแก้ไขปัญหานี้ เราสามารถใช้ประโยชน์จาก :nth-child(An+B [of S]?) โดยการยกเว้นแถวที่ซ่อนจากตรรกะ An+B ดังนี้

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

เจ๋งใช่ไหมล่ะ

รูปภาพโดย Markus Spiske ใน Unsplash