การอ่าน และ การเรียกชื่อ CSS3 Selectors

ในตอนแรก ผมตั้งใจเขียนบทความในเรื่องการเขียน Floating Layout โดยใช้ Simple Selectors ผสมกับ Combinators ผลปรากฎว่า พอผมกลับมานั่งอ่านเองแล้ว ยังเห็นความยุ่งยากของการทำความเข้าใจกับการเรียกชื่อ Selectors แบบต่างๆ อยู่ อาจกล่าวได้ว่า ถ้าคนที่ไม่แตกฉานเรื่อง CSS Selectors แล้วมาอ่าน คง มึนงง กลับบ้านไม่ถูกกันเลยทีเดียว

ก่อนหน้านี้ผมเขียนบทความเรื่อง "อาชีพ เขียน CSS" เอาไว้ ตั้งปณิธาน เอาไว้ว่า จะพยายามอธิบายสิ่งที่มันยากๆ ให้เข้าใจง่าย และจะพยายามหาเรื่องใหม่ๆ มาให้คนที่สนใจได้รับรู้และศึกษา ตาม Title ของ ThaiCSS ที่เปลี่ยนไป เป็น CSS3 จึงต้องหันกลับมา เริ่มเขียนเรื่องใหม่ ค่อยๆ แนะนำกันให้เข้าใจกันก่อน

บางคนที่ทำมาหากินกับการเขียน CSS HTML แทบเรียกชื่อ Selectors ของ CSS ไม่ถูกด้วยซ้ำไป เพราะฉะนั้นแล้ว ถ้าผมไม่มีเนื้อหาเกี่ยวกับการสร้างความเข้าใจในเรื่อง Selectors ของ CSS แล้ว นั่นก็หมายความว่า "ผม บกพร่องในหน้าที่ ของการถ่ายทอดความรู้เรื่อง CSS"

หมวดหมู่ของ CSS3 Selectors ที่มีอยู่ในปัจจุบันนั้น W3C ได้แยกออกจากกันหลากหลายรูปแบบ และปรับเปลี่ยนโยกย้ายกลุ่มมากไปพอสมควรจาก CSS2.1

ก่อนอื่นนั้นเรามาทำความเข้าใจการเรียกชื่อหลักๆ ของ Selectors กันก่อนครับ

CSS3ได้แยกแยะหมวดหมู่ของ Selectorsที่เอาไว้ใช้งานหลักๆ เป็น 4กลุ่ม คือ

1. Group of selectors
2. Simple Selectors
3. Pseudo-elements
4. Combinators

Group of Selectors

คือ การรวม Selectorsของ CSSหลายหลายอันเข้ามาอยู่ด้วยกัน โดยใช้ เครื่องหมาย "จุลภาค" หรือเรียกว่า "ลูกน้ำ" หรือ ภาษาอังกฤษ เรียก Comma ( , )เช่น

a,  .ต้นไม้,  li>strong { color: rgb(255,255,255); }

หมายถึง ให้ aและ "อะไรก็ตามที่มี classเท่ากับ "ต้นไม้" และ strongมีตัวหนังสือที่มีค่าสีเท่ากับรหัส RGB 255,255,255 (สีขาว)

หรือเป็นการนำเอา ชุดของ Selectorที่มีตั้งแต่ สองชุดขึ้นไปมารวมกัน เพื่อสั่งงานให้ทำงานใน Moduleเดียวกัน

Simple Selectors

มาต่อด้วยชุดที่ 2คือ Simple Selectorsซึ่งในหมวดหมู่นี้ผมเคยพูดไปบ้างแล้ว ในเนื้อหาเรื่อง "ทำ ความเข้าใจ Attribute Selector ของ CSS"แต่มันก็ยังไม่ครอบคลุมทั้งหมด เพราะมันเป็นเพียงแค่ ส่วนเล็กๆ เท่านั้นของ Simple Selectors

1. Type Selector

Type Selectorsคือ ชื่อของ Elementของภาษาที่ CSSนี้สั่งงานอยู่ เช่น ถ้าเป็น XHTMLเราสังเกตเวลาเขียน h1 {font-size: 18px;} h1นั่นก็คือ type selector

ที่ผมบอกว่า "Elementของภาษาที่ CSSนี้สั่งงานอยู่" ก็เพราะว่า ภาษา CSSไม่ได้มีความสมารถแค่เพียงจัดหน้าให้กับ HTMLอย่างเดียวเท่านั้น บางครั้งเราเขียน CSSเพื่อจัดหน้า SVGหรือ XMLอาจจะทำให้ Type Selectorsต่างๆ ที่เกิดขึ้นอยู่นอกเหนือไปจากที่เราเคยเจอในภาษา HTML5หรือ XHTML1.1

2. Universal Selector

Universal Selectorหมายความตามท้องเรื่องรวมๆ ได้ว่า "อะไรก็ตาม" ที่เราเห็นเป็นรูปร่างใน Selectorคือ เครื่องหมาย "ดอกจัน" ( * )รหัส [U+002A]

หลายๆ คนที่เคยใช้เอาไว้ Resetค่า CSSให้เป็น 0เช่น * {padding: 0;}คือ ทุกๆ อย่าง ให้มี paddingทั้ง 4ด้าน เป็น ศูนย์

2.1 Attribute Selectors

ถึงแม้ว่าผมเคยเขียนเนื้อหาว่าด้วยเรื่องของ Attribute Selectors [ทำ ความเข้าใจ Attribute Selector ของ CSS]เอาไว้แล้วก็ตาม พอผมกลับมาอ่านดูอีกรอบ กลับกลายเป็นว่า ผมอ่านแล้ว เข้าใจสิ่งที่ตัวเองเขียนแค่เพียงเล็กน้อย นี่ถ้าเกิดคนที่ไม่รู้เรื่องเลยเข้ามาอ่าน จะเกิดการสับสนมึนงงขนาดไหน เอาเป็นว่า ผมเรียบเรียงให้ได้ทำความเข้าใจกันใหม่นะครับ

Attribute Selectorsของ CSS3ได้แบ่งย่อยออกเป็น 2กลุ่ม กลุ่มแรกคือ การกล่าวถึง "ค่าของ Attribute"กันตรงๆ และกลุ่มที่สองคือ การกล่าวถึง "ค่า ของ Attribute"เป็นบางส่วน

2.1.1 Attribute presence and value selectors

2.1.1.1 [attribute]

หรือ เวลาเรานำมาเขียนจริง h1[id] {}หรือ a[rel] {color: red;}หมายถึง ให้กระทำการแสดงผล อะไรก็ตามที่มี Attributeข้างต้น

2.1.1.2 [attribute="value"]

คือ Elementใดๆ ก็ตามที่มี attributeซึ่ง "มีค่า" เท่ากับที่กล่าวมา เช่น

iblockqoute[title="สมพร"]  { background: rgba(50,50,50,0.5);} 

อ่านว่า จงทำblockqouteที่มี titleเท่ากับ "สมพร" ให้มี สีพื้นหลัง เท่ากับ รหัส rgb 50,50,50และมีค่า โปร่งแสงที่ 0.5

หรือ เมื่อเราไปใช้กับ Attributeอื่นๆ a[href="https://www.thaicss.com/"] { }หรือ img[title="ท้องฟ้า"] { }

2.1.1.3 [attribute~="value"]

คือ Elementใดๆ ก็ตาม ที่มี Attributeตรงกับ Valueแต่ถูกแบ่งจากคำอื่นๆ ด้วย "ช่องว่าง" เช่น

ถ้าเรามี HTMLในลักษณะนี้

HTML

<figure>
	<img  src="moon.jpg" alt="ดวงจันทร์ มีก้อนเมฆบังเล็กน้อย มีต้นไม้เป็นฉากหน้า" title="คืนเหงา" />

	<p>ชีวิตที่รันทดของสมพร กับค่ำคืนแสนเปลี่ยว โอ้...อนิจจา</p>
</figure>

เราสามารถเขียน CSSได้ในรูปแบบนี้

img[alt~="ดวงจันทร์"]  {border-color: hsl(30,100%,20%);}

อ่านว่า ให้กระทำการ "ใส่ เส้นขอบ ที่มีค่าสี hue = 30, saturation=100%, lightnes=20%"กับ "imgที่มี alt attributeซึ่งมีคำว่า "ดวงจันทร์" ที่ถูกคั่นจากทำอื่นๆ ด้วยช่องว่าง"

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

ดูตัวอย่าง : CSS3 Color Module

การทดลองตามตัวอย่าง ไม่ได้เกี่ยวกับดวงจันทร์ แต่ผมลองว่า ผมจะจูนสีรูปภาพบนเว็บได้ด้วย CSS จริงหรือไม่!!

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