nth-child() และ not() ใน CSS Selectors

ภาพตัวอย่างบทความ nth-child() และ not() ใน CSS  Selectors

CSS Pseudo-classes ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ
Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน

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

  1. Type Selector
  2. Universal Selector
  3. Attribute Selectors
  4. Class selectors (อันนี้ได้ข่าวว่า ชาวไทยผู้คลั่งชาติ ชอบใช้กันมาก)
  5. ID Selectors (อันนี้ หลายคนก็ยังไม่รู้ว่ามันต่างจาก อันด้านบนยังไง และเลือกใช้งานยังไงอีก)
  6. พอมาถึงตรงนี้ ถ้ายังเลือกหา Selectors ที่เหมาะสมเพื่อจะจัดการกับ HTML ของเรายังไม่ได้ ให้ข้ามไปที่ Combinators Selectors โดยเริ่มที่การเลือก Descendant Combinator ก่อน ถ้ายังไม่ได้ ให้ไป
  7. Child combinators
  8. Sibling combinators โดยในนี้ มี 2 อันให้เลือกใช้คือ Adjacent sibling และ General sibling
  9. ถ้าลูกค้าเร่งงานมาด่วนมาก คิดไม่พบ ว่าอะไร เป็นยังไง ให้ทำงานหาเงินก่อน อย่าเพิ่งคำนึงถึง 8 ข้อด้านบนมาก เดี๋ยวจะไม่มีเงินกินข้าว

จบด้วยการไม่อธิบายต่อ เพราะหัวข้อที่ผมว่าไว้ข้างบน เราจะมาลองเล่น :nth-child() และ :not() นั่นเอง

จากบทความก่อนหน้านี้ เรื่อง CSS3 Attribute Selectors กับแนวคิดการทำ Floating Layouts ผมขอยกตัวอย่างต่อกันมาเลยนะครับ

สมมุติว่า เราจะแบ่งสวนหนึ่งส่วนใดของเว็บออกเป็น 3 สดมภ์ แล้วใส่ข้อมูล ซึ่งเรามีชุด CSS กลางที่ช่วยในการแบ่งอยู่แล้ว

ภาพตัวอย่างบทความ nth-child() และ not() ใน CSS  Selectors

ขั้นต่อมา ก่อนอื่นใด ที่เราจะใส่ข้อมูลเข้าไปในแต่ละช่องนั้น ควรจะต้องมี Nest element สักอันมา ทำการครอบเอาไว้ก่อน เพราะเมื่อใดก็ตามถ้าเราทำการสั่ง <li> โดยตรงตามตัวอย่าง เช่น เพิ่ม padding: 10px; จะทำให้ layout ที่เราเขียนไว้นั้น เสียทันที เพราะค่าความกว้างที่รับมาจาก 33% ของแต่ละ <li> นั้น จะกลายเป็น 33%+20 เป็นเหตุให้ อะไรก็ตามที่อยู่ท้ายสุดนั้น ร่วงลงมากองเอ๊าะเย๊าะศิลป์ ที่ด้านล่าง

ในรูปตัวอย่างผมเอา <article> ใส่เข้าไปก่อน

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

ภาพตัวอย่างบทความ nth-child() และ not() ใน CSS  Selectors

ถ้าเป็นเมื่อสมัยพระเจ้า สามหำ วิธีการแก้ง่ายๆ คือ สร้าง class ของ css ขึ้นมา 1 class แล้วให้มี border-left: dotted 1px #xxx; แล้วเอาไปใส่ใน elements ที่ไม่ใช่ตัวแรกแทน

ปัญหามันจะตามมาคือ การเขียน HTML ที่ไม่ถูกระบบ ระเบียบ เพราะเว็บสมัยใหม่เขาบอกว่า attributes ใดๆ ที่เกิดขึ้นใน HTML นั้น ควรจะเกิดขึ้นเพื่อการสื่อสารด้านข้อมูล ไม่ใช่นำมาอ้างอิงเพื่อจัดหน้าเอกสาร ซึ่งถ้าเรายังเคารพกฎข้อนี้ เราก็ควร เรียนรู้เพื่อที่จะได้ปฏิบัติตามอย่างถูกวิธี เพราะฉะนั้น การเขียน คลาสของ CSS ที่ให้มีเส้นขอบด้านซ้าย แล้วเอามาใส่จึงไม่ใช่วิธีการที่ถูกต้องนัก

เขียนง่ายๆ บรรทัดเดียวครับ

ภาพตัวอย่างบทความ nth-child() และ not() ใน CSS  Selectors

ul[class*=”แบ่งหน้า-แบบ-สามสดมภ์”]>Li:not(:nth-child(1))>article อ่านว่า article ที่เป็นลูกของ li ที่ไม่ได้เป็นลูกลำดับที่ 1 ของ ul ซึ่งมี attribute
class ส่วนใด ส่วนหนึ่งตรงกับคำว่า แบ่งหน้า-แบบ-สามสดมภ์

จบข่าว

มีความสุขกับการใช้ชีวิตครับ

Back to Top

5 Responses to nth-child() และ not() ใน CSS Selectors

  1. radiz

    เงียบเลยนะ เขาไปไหนกันหมด

    Reply

  2. buggo

    thaicss ใหม่ … หน้าตาดีเหมือนคนทำ … แปะโป้งเอาไว้ก่อนเด้อ เดี๋ยวมาอ่าน

    Reply

  3. buggo

    การเขียนโค้ดแบบเก่าไม่ถูกต้องนัก คือ ถูกแต่ไม่ที่สุด // หรือผิด แต่ผิดในเกณฑ์ที่ยอมรับได้

    กำลังปะติดปะต่อรอวันเกิดหรือไม่ก็ดับไปเลยกับ CSS แต่ที่แน่ๆ 1 ก.ย. ได้เวลาย้ายรังชัวร์แล้ว ส่วนรังใหม่จะสามารถ "ฟักตัว" ออกมาเป็นคนหรือ "ฟักออฟ" ก็ต้องรอดูต่อไป เช่นเดียวกับ CSS+HTML

    Reply

  4. pornantha

    @buggo รังใหม่ของท่าน น่าจะ ออฟ ไปแล้ว ค่อย ฟัก นะครับ น่าจะเข้าที

    Reply

  5. Kulachat Kena

    33%+20 โอ้มักคักครับ กองเอ๊าะเย๊าะศิลป์

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top