เมื่อวานมีโจทย์ที่น่าสนใจเกี่ยวกับ CSS คร่าวๆ คือ

ให้ลงสีแดง button เมื่อแสดงเพียง 2 ปุ่ม ถ้ามีปุ่มน้อยกว่าหรือมากกว่านั้นให้ลงเป็นสีเขียวแทน

ซึ่งแนวคิดมันดูไม่ยากนะ แต่พอทำจริงกลับยากเพราะ CSS ไม่มี style ที่ขึ้นกับจำนวนของ element ใน parent สิ่งที่ต้องแก้คือเราจะใช้ CSS ในการเลือก element ประเภทเดียวกันที่ติดกันตามจำนวนที่ต้องการได้อย่างไร

วิธีทำ

มาดู CSS selector ที่พอจะเป็นไปได้ก่อน

  • X ~ Y เลือก element Y ทุกตัวที่อยู่ใน parent เดียวกับ X
  • X + Y เลือก element Y ที่อยู่ข้างๆ X
  • X:only-child เลือก element X ก็ต่อเมื่อ X เป็น element เดียวที่อยู่ใน parent
  • X:first-child เลือก element X ตัวแรกที่อยู่ใน parent
  • X:last-child เลือก element X ตัวสุดท้ายที่อยู่ใน parent
  • X:nth-child(n) เลือก element X ตัวที่ n
  • X:nth-last-child(n) เลือก element X ตัวที่ n นับจากตัวสุดท้าย

ถ้ามีแค่ button เดียว อันนี้ไม่ยาก ใช้ X:only-child ก็ได้ละ แต่ถ้ามีมากกว่านั้น เราสามารถใช้ X:nth-last-child(n) ได้

สมมุติว่าเรามี button 3 ปุ่มใน parent button:nth-last-child(3) ก็คือปุ่มแรก แต่ถ้า button:nth-last-child(2) ก็จะได้ปุ่มที่ 2 หรือ button:nth-last-child(4) ก็จะหาไม่เจอเลย หมายความว่า

button:nth-last-child(n) = button แรกใน n ปุ่ม

มาถึงขั้นนี้คือเราสามารถ apply CSS สำหรับปุ่มแรกใน n ปุ่มได้แล้ว ปุ่มที่เหลือเราสามารถใช้ X ~ Y เพื่อเลือก button ประเภทเดียวกันที่ติดกัน (sibling) เป็นอันเสร็จ

ตัวอย่าง CodePen

See the Pen CSS selector n siblings by Raksit Mantanacharu (@raksit31667) on CodePen.

References