การใช้งาน CSS :nth-child()

อีกหนึ่ง pseudo-selector ของ CSS ที่ผมดูแล้วแหล่มมากๆ ก็คือเจ้า nth-child() นี่แหละครับ ของดีจะเก็บไว้คนเดียวมันจะไปมันส์~ อะไรจริงไหม ^^ เพื่อนๆ บางคนอาจจะเคยเห็นผ่านตามาบ้าง เช่น

ul li:nth-child(3n+3) {
  color: #ccc;
}

[imooh_google_ads]
ขยายความตัวอย่างโค้ด css ด้านบนซักหน่อย จาก css เป็นการเลือกแท็ก <li> ที่อยู่ภายใต้แท็ก <ul> โดยเลือกแท็ก <li> ที่ตำแหน่ง 3, 6, 9, 12 ไปเรื่อยๆ ตามสมการที่ส่งเข้าไป (3n+3) โดยที่ค่าของ n จะเริ่มจาก 0 และจะเพิ่มขึ้นไปเรื่อยๆ เป็น 0, 1, 2, 3, 4 … มาลองแทนค่าของ n ในสมการดูคร่าวๆ ครับ

(3 x 0) + 3 = 3 -> <li> แท็กที่ 3
(3 x 1) + 3 = 6 -> <li> แท็กที่ 6
(3 x 2) + 3 = 9 -> <li> แท็กที่ 9
(3 x 3) + 3 = 12 -> <li> แท็กที่ 12
… 

แล้วถ้าเกิดเปลี่ยนสมการเป็น :nth-child(2n+1) ล่ะจะเกิดอะไรขึ้น

(2 x 0) + 1 = 1 -> <li> แท็กที่ 1
(2 x 1) + 1 = 3 -> <li> แท็กที่ 3
(2 x 2) + 1 = 5 -> <li> แท็กที่ 5
(2 x 3) + 1 = 7 -> <li> แท็กที่ 7
… 

อ่า..สังเกตดีๆ มันเป็นเลขคี่นี่นา เพื่อให้ใช้งานง่ายขึ้นก็มี odd (เลขคี่), even (เลขคู่) ที่สามารถส่งข้าไปได้เลย ตัวอย่างๆ

tr:nth-child(odd){
   background: #eee;
}
tr:nth-child(even){
  background: #ddd;
}

ถึงตรงนี้จะช่วยให้การ highlight ตารางที่แต่ก่อนต้องเขึยนโค้ดให้หาเลขคี่เลขคู่แล้วใส่คลาสให้แต่ละแท็ก <tr> แต่ตอนนี้ตัดไปได้เลยมาจัดการที่ css ได้เลยแหล่มไหมล่ะ ^^