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

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

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

ตัวเลือกคลาส Pseudo ของ :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): เลือกกลุ่มแรก (=(5×0)+1), คนที่ 6 (=(5×1)+1), คนที่ 11 (=(5×2)+1), ...
• :nth-child(5n+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() 2-3 รายการต่อไปนี้เข้าด้วยกันและคุณจะเลือกช่วงขององค์ประกอบได้

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

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

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

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

: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