CSS Nth Child Generator: เลือก element ทุกตัวที่ N ด้วย formula An+B
คู่มือใช้งาน CSS Nth Child Generator — สร้างและ preview :nth-child, :nth-of-type และ selector formula แบบ An+B กับกริด element แบบสด ๆ พร้อม copy rule ที่ได้ทันทีในเบราว์เซอร์
Table of Contents
CSS Nth Child Generator: เลือก element ทุกตัวที่ N ด้วย formula An+B
แทบทุกคนเคยพิมพ์คำถามแนว "how to select every 3rd item in CSS" ลงในช่องค้นหาสักครั้ง ทั้งที่คำตอบมีมานานสองทศวรรษแล้ว นั่นคือ formula แบบ An+B เหตุผลที่คนยังต้องไปค้นกันอยู่เรื่อย ๆ ก็เพราะสัญกรณ์นี้ดูเหมือนพีชคณิต จนกว่าใครสักคนจะอ่านออกเสียงมันว่า 3n+1 แปลว่า "ทุก ๆ ตัวที่ 3 เริ่มนับที่ตัวที่ 1" แล้วทุกอย่างจะกระจ่างขึ้นมาทันที เครื่องมือ CSS Nth Child Generator ฟรีของเราปิดช่องว่างตรงนี้ให้ตลอดกาล มันแปลงสิ่งที่คุณอธิบายเป็นภาษาพูดให้กลายเป็น selector ที่แม่นยำ พร้อมแสดงให้เห็นว่า element ตัวไหนถูกเลือกบ้าง ก่อนที่โค้ดจะถึง stylesheet จริง
เครื่องมือนี้คือสนามทดลองขนาดกะทัดรัดที่สร้างขึ้นจากแนวคิดเดียว คุณพิมพ์หรือเลือก formula An+B, เลือกได้ระหว่าง :nth-child, :nth-of-type, :nth-last-child หรือ :nth-last-of-type แล้วกริด element ที่มีเลขกำกับจะวงช่องที่ formula เลือกให้เห็นทันที ลากตัวเลื่อนจำนวน element ขึ้นลงเพื่อทดสอบ pattern ในหลาย ๆ สถานการณ์ แก้ไข highlight rule เพื่อดูตัวอย่างสไตล์จริง แล้วกด copy โค้ด CSS ที่เสร็จแล้วด้วยคลิกเดียว ทุกอย่างทำงานฝั่ง client ในเบราว์เซอร์ของคุณ 100% ไม่มีการอัปโหลดข้อมูลและไม่ต้องสมัครบัญชี
ในคู่มือนี้คุณจะได้รู้ว่าทำไมเครื่องมือนี้ถึงควรอยู่ใน workflow ของคุณ, แต่ละตัวควบคุมทำอะไร, วิธีอ่าน formula An+B ให้เป็นเหมือนอ่านประโยค และการจัดสไตล์แบบเลือกเฉพาะจุดเปิดประโยชน์จริงตรงไหนในโปรเจกต์ production
ทำไมต้องใช้ CSS Nth Child Generator?
- จบปัญหา "เลือกทุกตัวที่ n" แบบไม่ต้องค้นซ้ำ — แทนที่จะกูเกิลสูตรเดิมทุกไม่กี่เดือน คุณลองเล่นจนสัญกรณ์มันติดตัว การเห็น 3n+1, -n+3 และ n+5 สว่างขึ้นบนกริดจริงสอนเรื่อง An+B ได้เร็วกว่า cheat sheet ทุกแบบ
- กริด preview แบบสด ๆ ตัดปัญหาการเดา — selector มองไม่เห็นจนกว่าหน้าเว็บจะ render เครื่องมือวงช่องที่ตรงเงื่อนไขทันทีที่คุณพิมพ์ ทำให้ความผิดพลาดโผล่มาในไม่กี่วินาที ไม่ใช่หลังผ่านรอบ save-build-refresh แล้ว
- preset ครอบคลุม pattern ที่ใช้จริง — odd, even, ตัวแรก, ทุก 3 ตัว, สามตัวแรก และตั้งแต่ตัวที่ 4 เป็นต้นไป กดเดียวจบ เพียงพอกับกฎสไตล์ส่วนใหญ่ในงานจริง
- รองรับ pseudo-class เชิงตำแหน่งครบทั้งสี่ตัว — :nth-child, :nth-of-type, :nth-last-child และ :nth-last-of-type ทำงานต่างกันใน markup ที่มี tag ผสมกัน การสลับดูในหน้าจอเดียวกันทำให้เห็นความต่างแบบชัด ๆ
- โค้ดที่ได้พร้อม copy ทันที — rule ที่สร้างได้มีทั้ง base selector, pseudo-class พร้อม formula และ declaration block ตัวอย่าง จบด้วยการวางใช้เลย ไม่ต้องตามไปแก้เพิ่ม
- เป็นส่วนตัว เร็ว และฟรี — ทั้งเครื่องมือทำงาน client-side ล้วน ไม่ต้องสมัคร ไม่มีการอัปโหลด ใช้ได้เหมือนกันทั้งบนแล็ปท็อปและมือถือ
ฟีเจอร์เด่น
| ฟีเจอร์ | ทำอะไร |
|---|---|
| ช่องกรอก formula | รับ expression แบบ An+B ได้ทุกรูปแบบ ทั้งคำสำเร็จรูปอย่าง odd กับ even, เลขตำแหน่งเดี่ยว และ formula ที่มีเครื่องหมายลบอย่าง -n+3 |
| ปุ่ม preset | formula กดเดียวได้เลย ทั้ง odd, even, ตัวแรก (1), ทุก 3 ตัว (3n+1), สามตัวแรก (-n+3) และตั้งแต่ตัวที่ 4 (n+4) |
| ตัวเลือก pseudo-class | สลับระหว่าง :nth-child, :nth-of-type, :nth-last-child และ :nth-last-of-type |
| ช่อง base selector | ครอบ formula ด้วย element, class หรือ compound selector ของคุณ เช่น li หรือ .card |
| ตัวเลื่อนจำนวน element | แสดง element ที่มีเลขกำกับตั้งแต่ 1 ถึง 48 ตัว ให้ทดสอบลิสต์สั้น กรณีขอบ และลิสต์ยาวได้ |
| ตัวแก้ไข highlight rule | แก้ declaration ตัวอย่างที่ใส่กับช่องที่ถูกเลือกได้ ทำให้ preview หน้าตาเหมือนสไตล์จริงที่จะใช้ |
| กริดแสดงผลแบบสด | วงทุก element ที่ตรงเงื่อนไขและอัปเดตตามที่คุณพิมพ์ ทำให้อ่านผลการเลือกผิดไม่ได้เลย |
| ปุ่ม Copy | copy rule ที่สร้างเสร็จทั้งก้อนลงคลิปบอร์ดด้วยคลิกเดียว |
มีรายละเอียดน่าสังเกตอยู่บ้าง parser ของเครื่องมือเข้มงวดเป็นพิเศษ ถ้าข้อความที่พิมพ์ตีความเป็น An+B ที่ถูกต้องไม่ได้ กริดจะไม่มีช่องไหนถูกวงเลย และ rule ที่สร้างจะถูกระงับการ copy ไว้ ช่วยกันไม่ให้คุณลอก selector ที่พักไปใช้ใน production นอกจากนี้ยังรองรับ syntax of S ด้วย ทำให้เขียนกฎแบบ "ตัวที่ 2 ที่ตรงกับ .featured ด้วย" ได้ ซึ่ง formula nth ธรรมดาพูดไม่ได้คนเดียว
วิธีใช้งาน
- เปิดเครื่องมือ เข้าไปที่ CSS Nth Child Generator โหลดทันทีในเบราว์เซอร์ยุคใหม่ทุกตัว ไม่ต้องติดตั้งหรือตั้งค่าอะไร
- เลือก pseudo-class และ base selector เริ่มจาก :nth-child กับ li แล้วค่อยปรับให้ตรงกับ markup จริงของคุณ เช่น .menu-item คู่กับ :nth-of-type เมื่อ container มี tag หลายชนิดผสมกัน
- พิมพ์หรือเลือก formula An+B พิมพ์ 3n+1 ลงช่อง formula ตรง ๆ หรือกดปุ่ม preset อย่าง odd, -n+3 หรือ n+4 แล้วดูกริดวงช่องใหม่ให้ทันตา
- อ่านกริดและทดสอบความทนทาน นับวงที่ได้ แล้วลากตัวเลื่อนจำนวน element ขึ้นลง เพื่อยืนยันว่า pattern ยังเลือกสิ่งที่คุณตั้งใจ แม้ลิสต์ยาวขึ้นหรือสั้นลง
- ปรับ highlight แล้ว copy rule แก้ declaration ตัวอย่างให้เห็นภาพสไตล์จริง กด Copy แล้ววาง selector ที่เสร็จแล้วลง stylesheet ได้เลย
วงจรทั้งหมดใช้เวลาไม่ถึงนาที ซึ่งก็คือจุดขายจริง ๆ ยิ่งเห็นผลของ formula เร็ว คุณก็ยิ่งวางใจที่จะใช้มันใน production เร็วตามไปด้วย
อ่าน An+B ให้เป็นเหมือนอ่านประโยค
ภาษาจิ๋ว An+B มีแค่สามส่วน A คือระยะก้าว — กระโดดกี่ตำแหน่งต่อรอบ n คือตัวนับที่รับค่า 0, 1, 2, 3 ไปเรื่อย ๆ และ B คือจุดเริ่ม — เริ่มนับจากตำแหน่งไหน ประกอบกันแล้ว 3n+1 อ่านว่า "ทุก ๆ ตัวที่ 3 เริ่มที่ตัวที่ 1" คือเมื่อ n = 0 ได้ตำแหน่ง 1, n = 1 ได้ตำแหน่ง 4 ต่อด้วย 7, 10 ไปเรื่อย ๆ พอฝึกอ่านแบบนี้ได้แล้ว สูตรยอดนิยมทุกตัวจะอธิบายตัวเองได้หมด:
- odd (เท่ากับ 2n+1) — ทุก ๆ ตัวที่ 2 เริ่มที่ตัวที่ 1: ตำแหน่ง 1, 3, 5, 7 ไปเรื่อย ๆ
- even (เท่ากับ 2n) — ทุก ๆ ตัวที่ 2 เริ่มที่ตัวที่ 2: ตำแหน่ง 2, 4, 6, 8 ไปเรื่อย ๆ
- 3n — ทุก ๆ ตัวที่ 3 เริ่มที่ตัวที่ 3: ตำแหน่ง 3, 6, 9 ไปเรื่อย ๆ
- -n+3 — นับถอยหลังจาก 3: ก็คือสามตัวแรกของลิสต์พอดี
- n+5 — จากตัวที่ 5 จนถึงตัวสุดท้ายของลิสต์
- 4 — ตำแหน่งเดียวคงที่ เท่ากับ :nth-child(4)
จุดที่คนสับสนบ่อยที่สุดใน markup จริงคือ :nth-child นับ sibling ทุกตัว ขณะที่ :nth-of-type นับเฉพาะ sibling ที่เป็น tag ชนิดเดียวกัน ถ้าบทความหนึ่งมี heading 3 ตัวกับ paragraph 5 ตัว .post p:nth-child(4) จะมองไปที่ลูกตัวที่สี่ไม่ว่ามันจะเป็นอะไร ขณะที่ .post p:nth-of-type(2) จะมองไปที่ paragraph ตัวที่สองโดยเฉพาะ ไม่มีแบบไหนผิด — ทั้งคู่ตอบคนละคำถาม — และการสลับสองโหมดนี้ในเครื่องมือจะบอกคุณทันทีว่าแบบไหนตรงกับ markup ของคุณ
กรณีที่ไม่มีอะไรถูกเลือกเลยก็ควรเข้าใจไว้เหมือนกัน 4n+9 ต้องมี element ตัวที่ 9 ก่อนจึงจะจับอะไรได้ ดังนั้นเจอลิสต์แปดตัวเมื่อไหร่มันจะไม่วงอะไรเลย ระยะก้าวติดลบก็หมดฝ่ายเดียวกัน คือ -2n+5 เลือกตำแหน่ง 5, 3, 1 แล้วจบ ตรงนี้แหละที่กริด preview แบบสดคุ้มค่าที่สุด — คุณเห็นความว่างเปล่าทันที แทนที่จะปล่อยกฎที่เงียบและไม่ทำอะไรเลยลง production และการลากจำนวน element ขึ้นไปจะบอกคุณว่า formula ต้องการลิสต์ยาวอย่างน้อยเท่าไรจึงจะทำงาน
กรณีใช้งานจริง
แถบลายม้าลายให้ตารางและลิสต์
การสลับสีแถวยังเป็นกฎ nth ที่ถูกใช้มากที่สุดบนเว็บ declaration เดียวอย่าง tr:nth-child(odd) ทำให้ตารางกว้าง ๆ อ่านง่ายขึ้นโดยไม่ต้องเพิ่ม class, JavaScript หรือ logic ฝั่งเซิร์ฟเวอร์ และเทคนิคเดียวกันใช้กับกริดการ์ดหรือชุดคอมเมนต์ได้หมด เพราะ pattern เป็นเชิงตำแหน่ง มันจึงรอดจากการ sort และ filter — ลบแถวออกเมื่อไหร่ ลายก็จัดสมดุลใหม่ให้เองอัตโนมัติ
กริดที่เริ่มต้นแบบมีออฟเซ็ต
เลย์เอาต์สไตล์บรรณาธิการมักทำลายจังหวะโดยตั้งใจ -n+3 ยกระดับการ์ดสามใบแรกเป็น hero tile ใบใหญ่ ส่วนใบที่เหลือคงขนาดกะทัดรัด และ n+5 เปลี่ยนสไตล์ทุกอย่างที่อยู่หลังแบนเนอร์ปักหมุด ส่วนในกริดสินค้าสามคอลัมน์ 3n+1 ชี้จุดเริ่มของทุกแถวใหม่ ซึ่งมีประโยชน์กับเส้นขอบสีเน้นที่ช่วย anchor แต่ละแถวให้สายตาจับได้
จุด indicator ของ carousel
แถวจุดนับหน้าคือดินแดนของ selector เชิงตำแหน่งล้วน ๆ .dots span:nth-child(3n+1) ขยายทุกจุดที่สามให้เป็น marker แบ่ง section, :nth-child(even) สลับสองเฉดเพื่อสร้างจังหวะเบา ๆ และการจับคู่ :nth-last-child กับ :nth-child ช่วยจัดสไตล์เฉพาะจุดแรกกับจุดสุดท้ายให้ต่างจากเพื่อน เมื่อแถวจุดถูกสร้างแบบไดนามิก การจัดสไตล์ด้วย formula แปลว่าคุณไม่ต้อง hard-code class ตามลำดับใน JavaScript อีกต่อไป
เส้นคั่นของเมนู
.nav li:nth-child(n+2) ใส่เส้นขอบซ้ายให้ทุกเมนูยกเว้นตัวแรก — สูตรเส้นคั่นคลาสสิกที่ยังทำงานต่อไม่ว่ารายการเมนูจะเพิ่มหรือลด จับคู่กับ :nth-last-child เมื่อต้องการข้ามรายการสุดท้ายด้วย ก็จะได้เส้นคั่นสะอาด ๆ ระหว่างรายการ โดยไม่มีเส้นค้างอยู่ที่ปลายทั้งสองด้าน
แนวปฏิบัติที่ดี
- กรณีซับซ้อนให้ใช้ class ที่มีความหมาย — ถ้ากฎหนึ่งต้องเขียน 3n+4 of .card:not(.muted) ถึงจะสื่อความตั้งใจ ลองถามตัวเองว่า class ที่ตั้งชื่อดี ๆ อย่าง .is-highlighted จะสื่อสารได้ดีกว่าไหม An+B เก่งเรื่อง pattern แต่มันทำให้ข้อยกเว้นแบบจุดเดียวอ่านยากขึ้น
- ใส่ comment กับ formula ที่อ่านยาก — comment สั้น ๆ อย่าง /* hero tiles: การ์ดสามใบแรก */ เหนือ -n+3 ช่วยนักพัฒนาคนถัดไป (และตัวคุณในอนาคต) ประหยัดเวลาถอดรหัส formula มันกระชับ แต่เจตนาข้างหลังมันไม่ได้กระชับเลย
- preview ก่อนส่งของจริง — ทดสอบ pattern กับตัวเลื่อนจำนวน element ที่ค่า 1, ค่าสูงสุดตามสถานการณ์จริง และอีกหนึ่งจังหวะถัดจากนั้น formula ที่ดูถูกต้องกับสิบสองตัวอาจพังตอนสามตัวหรือสี่สิบตัวก็ได้
- จำไว้ว่า :nth-child นับ sibling ทุกตัว — text node กับ comment ไม่ถูกนับ แต่ wrapper element ที่คุณลืมนั้นถูกนับ เมื่อ sibling ผสมหลายชนิด ให้สลับไป :nth-of-type หรือครอบลูกที่เป็นชนิดเดียวกันด้วย container ของมันเอง
- ระวังกับดักศูนย์กับหนึ่ง — ตัวนับ n เริ่มที่ 0 แต่ตำแหน่ง element เริ่มที่ 1 ออฟเซ็ตจุดเดียวนี่แหละที่อธิบายความประหลาด "เพี้ยนไปหนึ่ง" ส่วนใหญ่ของ nth formula
- รักษา specificity ให้คาดเดาได้ — กฎ nth สืบทอด specificity จาก selector ที่มันแนบไป เอกสารไว้ด้วยว่ากฎใช้ตรงไหน เพื่อไม่ให้ .featured ที่เพิ่มทีหลังมาชนกับมันแบบเงียบ ๆ
เริ่มเลือก element อย่างมั่นใจได้เลย
เลิกเขียน nth formula จากความจำซ้ำแล้วซาก เปิด CSS Nth Child Generator ฟรีของเรา พิมพ์ formula หรือกด preset แล้วดูกริดแบบสดวง element ที่คุณกำลังจะกำหนดเป้าหมาย ปรับ highlight, กด copy แล้ววางลงโปรเจกต์ — ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ ภายในไม่กี่วินาที โดยไม่มีข้อมูลใดถูกส่งไปเซิร์ฟเวอร์
เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:
- Tailwind Class Sorter — จัดเรียง class list ของ Tailwind ที่รกให้เป็นระเบียบอ่านง่ายสม่ำเสมอ
- CSS Animation Generator — สร้าง keyframe animation แบบภาพ และ copy โค้ด CSS พร้อมใช้งาน
- CSS Tooltip Generator — ออกแบบ tooltip ล้วน CSS พร้อมเรื่องตำแหน่งและหัวลูกศรจัดการให้เรียบร้อย
ขอให้สนุกกับการเขียน selector
คำถามที่พบบ่อย
ถ: 3n+1 ใน CSS selector แปลว่าอะไร?
ตอบ: ให้อ่านเหมือนประโยคว่า "ทุก ๆ ตัวที่ 3 เริ่มที่ตัวที่ 1" ตัวนับ n รับค่า 0, 1, 2 ไปเรื่อย ๆ ดังนั้น 3n+1 จึงจับตำแหน่ง 1, 4, 7, 10 และต่อ ๆ กันไป formula แบบ An+B ทุกตัวใช้วิธีอ่านเดียวกัน คือ A คือระยะก้าว ส่วน B คือจุดเริ่มต้น
ถ: :nth-child กับ :nth-of-type ต่างกันอย่างไร?
ตอบ: :nth-child นับ sibling ทุกตัวไม่ว่าจะเป็น tag อะไร ขณะที่ :nth-of-type นับเฉพาะ sibling ที่เป็น tag ชนิดเดียวกัน ใน container ที่มี heading กับ paragraph ผสมกัน .post p:nth-of-type(2) จะชี้ paragraph ตัวที่สอง แต่ .post p:nth-child(2) จะชี้ลูกตัวที่สองไม่ว่ามันจะเป็นอะไร เครื่องมือให้คุณสลับสองโหมดนี้เพื่อดูว่าแบบไหนตรงกับ markup ของคุณ
ถ: ทำไม :nth-child formula ของฉันถึงไม่จับอะไรเลย?
ตอบ: สาเหตุที่พบบ่อยคือตำแหน่งของ formula หลุดออกนอกลิสต์ 4n+9 จับอะไรไม่ได้จนกว่าจะมี element ตัวที่ 9 และระยะก้าวติดลบอย่าง -2n+5 ก็จบที่ตำแหน่ง 1 ลองลดจำนวน element ในกริด preview เพื่อสร้างผลลัพธ์ว่างเปล่าซ้ำ แล้วค่อยปรับออฟเซ็ต — หรือยืดลิสต์ — จนกว่าวงจะปรากฏตรงจุดที่คาดไว้
ถ: formula แบบ An+B ใช้ได้กับทุกเบราว์เซอร์หรือไม่?
ตอบ: :nth-child และ :nth-of-type ถูกรองรับในเบราว์เซอร์หลักทุกตัวมาหลายปีแล้ว สูตรอย่าง odd, even และ 3n+1 จึงปลอดภัยทุกที่ ส่วน syntax ใหม่อย่าง of S มีเฉพาะเบราว์เซอร์ยุคใหม่ ควรเช็กเส้นฐานการรองรับของโปรเจกต์ก่อนใช้จริง
ถ: CSS Nth Child Generator ฟรีและเป็นส่วนตัวจริงหรือ?
ตอบ: จริงครับ เครื่องมือฟรีทั้งหมด ไม่ต้องสมัครบัญชี และทำงานฝั่ง client ในเบราว์เซอร์ของคุณ 100% formula, markup และโค้ด CSS ที่สร้างได้ไม่เคยออกจากเครื่องของคุณเลย