รู้จักกับ CSS Selectors Level 4

ขอขอบคุณ Guest Post จากคุณ Krissanawat Kaewsanmuang
ติดตามผลงานเพิ่มเติมได้ที่ http://taqmaninw.com

การเปลี่ยนแปลงหลักๆ ใน CSS Selector Level 4 คือจะมีการเพิ่ม pseudo-classes ใหม่เข้ามาเยอะมากเลยครับ เราลองมาดูกันว่า pseudo-classes เหล่านี้ มีอันไหนที่น่าสนใจบ้าง

Logical Combinations

:matches

ใช้ในการรวมกลุ่ม selectors เข้าด้วยกัน ลองดูตัวอย่างนี้

ทีนี้เราลองมาดูตัวอย่างที่ซับซ้อนขึ้นอีกนิดนึง

:not

คล้ายกับ matches แต่กลุ่มของ selectors ที่รวมไว้นั้นจะต้องไม่อยู่ใน selector ที่เป็น parent ลองดูตัวอย่างนี้

ผลที่ออกมาคือ p ที่ไม่ได้เป็น .active และ .visible จะกลายเป็นสีแดงหมด ทีนี้ลองมาดูอีกตัวอย่างหนึ่ง

h1 ที่ไม่ได้เป็น #title และ .active จะกลายเป็นสีดำหมด

Location Pseudo-classes

:any-link

ใช้ในการรวม a:link กับ a:visited เข้าด้วยกัน

:local-link

pseudo-class นี้จะแบ่งการใช้งานออกเป็น 2 รูปแบบด้วยกันดังนี้

non-functional

การใช้แบบนี้จะหมายถึง link ที่มี url เดียวกับหน้าปัจจุบัน หรือพูดง่ายๆ ก็คือ link ที่ active อยู่นั่นเอง

functional

ส่วนการใช้แบบนี้ เราจะสามารถใส่จำนวนเต็มบวกให้เป็น argument ของ :local-link ได้ โดยจำนวนที่เราใส่ไปนั้นจะหมายถึงจำนวน segments ของ url ลองดูตัวอย่างต่อไปนี้

Time-dimensional Pseudo-classes

pseudo-classes กลุ่มนี้จะมีประโยชน์กับผู้ที่ใช้งาน screen reader ในการอ่านข้อความบนเว็บไซต์ออกมาเป็นเสียงพูด โดยเราจะสามารถกำหนด style ของข้อความให้เข้ากับการอ่านของ screen reader ได้ว่า มันได้อ่านข้อความตรงนี้ไปแล้วหรือยัง คล้ายๆ กับการเน้นสีข้อความใน karaoke

Parent Selector

ในการเขียน selector เราจะเรียก element ที่ได้รับผลจาก selector นั้นๆ ว่า “Subject” ซึ่งก็คือ “selector ย่อย” ตัวที่อยู่ด้านขวาสุดนั่นเอง แต่สำหรับ css selectors level 4 นี้ เราสามารถเลือกเองได้ว่า อยากจะให้ subject ของ selector นั้น เป็น selector ย่อยตัวไหน ด้วยการใส่ “!” เอาไว้ที่ด้านหน้า selector ย่อยตัวนั้นๆ

บทสรุป

หลังจากที่อ่าน draft ดูคร่าวๆ ผมพบว่าส่วนที่เพิ่มเข้ามา หลักๆ จะเป็นส่วนที่ช่วยสร้างเงื่อนไขในการเลือกให้สามารถระบุได้เจาะจงมากยิ่งขึ้นครับ จริงๆ แล้ว ยังมี pseudo-classes อีกมากที่ผมยังไม่ได้พูดถึง เพื่อนๆ ที่สนใจอยากลองเล่น สามารถเข้าไปตรวจดูว่า web browser ของท่านรองรับแล้วหรือยังได้ที่เว็บ CSS4-Selectors ครับ

(Visited 2,233 times, 1 visits today)

4 Responses to “รู้จักกับ CSS Selectors Level 4”

  1. Neeon says:

    not ตอนนี้ ใช้กะเบาวเซอร์ใหม่ๆได้แล้วคะ ^^

  2. css3 เมืองไทยยังไม่เต็มที่เท่าไหร่เลย level 4 มาแระ ^_^

    • Siam HTML says:

      ใช่ครับ ตอนนี้เค้าแยกพัฒนาเป็นโมดูลๆ ไป โมดูลไหนพร้อมก่อนก็ประกาศให้เป็น recommendation เลย ไม่ต้องรอให้เสร็จสมบูรณ์ทุกๆ โมดูลเหมือนแต่ก่อน ^_^

  3. dixon says:

    เยี่ยมเลยครับ

Leave a Reply