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 กลางที่ช่วยในการแบ่งอยู่แล้ว

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

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

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

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

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

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

  

  ul[class*="แบ่งหน้า-แบบ-สามสดมภ์"]>li:not(:nth-child(1))>article  {
  Border-left: dotted 1px rgb(159,34,20);
  }
  

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

จบข่าว

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