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

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

เช่น

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

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

แล้วถ้าเกิดเปลี่ยนสมการเป็น :nth-child(2n+1) ล่ะจะเกิดอะไรขึ้น
(2 x 0) + 1 = 1 -&gt; &lt;li&gt; แท็กที่ 1<br />
(2 x 1) + 1 = 3 -&gt; &lt;li&gt; แท็กที่ 3<br />
(2 x 2) + 1 = 5 -&gt; &lt;li&gt; แท็กที่ 5<br />
(2 x 3) + 1 = 7 -&gt; &lt;li&gt; แท็กที่ 7<br />
… 

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

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

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