Selector

NTH Child CSS รู้จักกับลำดับญาติให้มากขึ้นอีกนิด

NTH คนเขียน CSS น่าจะคุ้นเคยกันดี เพราะเอาไว้เป็น Selector สำหรับ เรียกใช้งาน ลูกๆ หรือญาติๆ ในครอบครัวเดียวกัน สามารถใช้งานได้ ทั้งแบบ Div , UL , LI, P แต่โดยทั่วๆไป มักจะเห็นคนใช้งาน หลักๆแค่ รูปแบบพื้นฐาน ก็เลยคิดว่า น่าจะยังมีอีกหลายแบบ ที่เรายังไม่ค่อยได้ใช้ เลยแวะมาชวนคุยครับ

Selector

Selector

NTH Child ลำดับญาติในครอบครัว

เรื่องพื้นฐานเลย สำหรับมือ CSS ที่จำเป็นต้องรู้ ก็คงไม่พ้น เรื่องของ Selector ซึ่งแน่นอน ว่าคนส่วนใหญ่ เทพกันอยู่แล้ว วันนี้ผมเลย จะมาพูด เผื่อสำหรับคนส่วนน้อย ที่ยังเป็นมือใหม่ อาจจะยังคิดไม่ออกว่า พื้นฐานของ child เนี่ย จะนำไปประยุกต์ ใช้งานอย่างไรได้บ้าง

ขอเริ่มจาก เรื่องพื้นฐานก่อนว่า อะไรคือ Selector แบบนี้ คร่าวๆแล้วกันนะครับ

nth-child selector เป็นการเรียก หรือกำหนดค่า ให้กับ element ที่มีลำดับ อยู่ภายใต้ element ตัวอื่นๆ  ซึ่งใช้คำว่า ลูก หรือคำว่า child เข้ามาแทน เพื่อให้ง่ายขึ้น ซึ่งสามารถกำหนดการเรียกได้ หลากหลายรูปแบบ แต่จริงๆ มันเป็นกลุ่มของ structural pseudo-class ซึ่งมีหลากหลายตัวมากๆ แต่เราจะใช้งานตัวนี้ ก็ต่อเมื่อ simple selector พื้นฐานหรือพวก combinators selector นั้นใช้งานไม่ได้

ขยายความต่ออีกนิดเดียว สั้นๆ กลุ่มของ Selector ปรกติเราแบ่งออกเป็นประมาณนี้ครับ

Basic Selector

  • Type selectors
  • Class selectors
  • ID selectors
  • Universal selectors
  • Attribute selectors

Combinators

  • Adjacent sibling selectors
  • General sibling selectors
  • Child selectors
  • Descendant selectors

Pseudo-classes

กลุ่มนี้ก็พวกที่มี : นำหน้า แล้วตามด้วยชื่อต่างๆ มากมาย ซึ่งรวมถึง nth-child ที่เรากำลังพูดถึงด้วย อันนี้ไม่ได้แยกย่อยนะครับ เพราะจะยาวเกิน

ทีนี้การเลือกใช้งาน โดยปรกติเลย จะเลือกจากความชอบ ความถนัด อันนี้ก็ไม่ได้แปลกอะไรนะครับ แต่มันก็มีลำดับชั้นของมันอยู่ เลือกใช้งานแบบที่เหมาะสมเลย ไล่มาเรื่อยๆ กลุ่มแรก เอาไม่อยู่ ค่อยลองกลุ่มถัดมา ยังไม่ได้อีกค่อยกลุ่มถัดไป อ่อ… แล้วก็ เดี๋ยวนี้ งานส่วนใหญ่ เห็นจับใส่ Class กับใส่ ID กันน่าดูเลย ลองศกษาเพิ่มเติมดูนะครับ

ผมยกตัวอย่างแบบง่ายๆ ขึ้นมาจากรูปภาพ ด้านล่างนี้ โดยใช้ พ่อ แม่ ลูก เป็นองค์ประกอบ ในครั้งแรกก่อน คิดว่าอาจจะเข้าใจง่ายขึ้น

Code example NTH Parents

Code Example Parents

จากในรูป จะเห็นว่า ผมแบ่ง Div element ออกมาเป็น พ่อ กับ แม่ (father and mother) ทั้งสอง element นี้ มองแบบนี้จะเหมือนว่า ไม่ได้เป็น child อยู่ แต่ไม่ใช่แบบนั้นครับ เพราะว่ามันเป็น div ตัวที่ 2 ที่แสดงออกมา ดังนั้น จึงต้องนับแบบนี้ไปด้วย 1 ครั้งว่าเป็น 1 child อ้าว….แต่ยังไม่หมดครับ

div-child 2

div-child 2

 

code1

code 1

เพราะเวลาเรียกหาลำดับของ element มันนับรวมทั้งหมด เท่ากับว่า อย่างเจ้า family นี่จะนับเป็น child ลำดับที่ 3 ทันที และทีนี้มาดูเล่า boy กับ girl บ้างแบบนี้จะถือว่า เป็น child ลำดับที่ 3 ไปด้วยเช่นกัน เพราะอยู่ใต้ขั้นของ family นั้นเอง

div-child 3

div-child 3

code 2

code 2

ทีนี้มาลองดูแบบ List กันบ้างครับ อันนี้จะดูเข้าใจง่าย เพราะนับกันตรงๆ เหมือนเมื่อกี้ แต่ li มันอยู่ใต้ ul เลย

list

list

Code 3

Code 3

Child ranges

เมื่อกี้พูดแบบที่เราพบเจอกันเป็นประจำไปแล้ว คราวนี้ มาลองดูกันในรูปแบบ ที่ไม่ค่อยได้ใช้เท่าไหร่บ้าง แต่เป็นประโยชน์มากเลย สำหรับการควบคุมลูกๆ โดยการใช้ระยะ (Ranges) มาเป็นตัวกำหนด วิธีการคือ เราจะนับจากตัวที่เราเริ่มต้นกำหนด แล้วบวกหรือลบไปเพิ่มเติม ดังนั้นมันเลยจะมีทั้ง Positive และ Negative มาดูวิธีการใช้เบื้องต้นกันครับ

Positive child

ใช้วิธีใส่ n ในวงเล็บ แล้วตามด้วยเครื่องหมายบวก พร้อมทั้งตัวเลข ที่ต้องการตั้งต้นใช้งาน เช่นในตัวอย่าง ให้เริ่มเปลี่ยนสี font ตั้งแต่ตัวที่ 7 เป็นต้นไป

Positive

Positive

Positive code

Positive code

Negative Child

คราวนี้เป็น ขั้วตรงข้าม กันกับเมื่อกี้บ้าง มีบวกแล้วก็มีลบ วิธีใช้งานให้เขียนเหมือนเดิมคือใช้ n ใส่ไปในวงเล็บแล้ว บวกเลขลำดับที่เราต้องการให้เริ่มต้นแสดงผล แต่ว่าต้องใส่เครื่องหมายลบ ที่ด้านหน้าของ n ในวงเล็บด้วยนะครับ

Negative

Negative

Negative Code

Negative Code

Generic Child

ถัดมาเป็นอีกแบบ คือแบบกำหนดจุดเริ่มต้น กับจุดปลายทางเอาไว้ ที่เหลือตรงกลางก็แสดงผลให้หมด แบบนี้ก็สามารถใช้ทั้ง Positive และ Negative เข้ามากำหนดได้เลย โดยคราวนี้จะใช้ nth-child เข้ามาใส่ 2 ครั้งเลย

Generic

Generic

Generic Code

Generic Code

Even And Odd Child

อันนี้น่าจะคุ้นตากันดี เวลาใช้งานกับพวก table ใช้บ่อยๆ ในเรื่องนี้ก็สามารเอามาใช้งานได้ เป็นอย่างดีเหมือนกัน เพราะกำหนดได้หมด ทั้งเลขคู่ และเลขคี่

odd

odd

odd code

odd code

even

even

even code

even code

จริงๆ ยังมีเรื่องของ nth-last-child, nth-of-type อีก แต่ยาวมากแล้ว วันนี้เอาไว้เท่านี้ก่อนดีกว่า เดี๋ยวน่าเบื่อเพราะเรื่องพื้นๆ เก่งกันอยู่แล้ว แค่อยากย้ำเตือนว่า ไอ้เรื่องพื้นฐานพวกนี้ หยิบมันมาใช้กันหน่อย สะดวก ใช้งานง่าย ไม่ต้องไปใส่ class อะไรเยอะแยะเต็มไปหมด เอาไว้มาต่อกันคราวหน้าครับ ขอบคุณที่ติดตามกันมาตลอดครับ

 

อ้างอิง : w3schools
อ้างอิง : developer mozilla