Fundamentals
Selector พื้นฐาน (Element, Class, ID)
Selector คือเครื่องมือที่ CSS ใช้บอกว่า 'ต้องการตกแต่ง element ไหน' ก่อนที่ style ใด ๆ จะทำงานได้ บทนี้สอน selector 5 แบบพื้นฐานที่ใช้บ่อยที่สุด พร้อม lab แยกทีละ selector เพื่อฝึกเลือก element ให้ตรงเป้าหมาย
Selector คืออะไร
ลองนึกภาพว่าคุณมีหน้าเว็บที่มี element หลายสิบตัว เช่น <h1>, <p>, <div>, <button>, <img> และอีกหลายส่วน CSS ต้องการรู้ว่า "จะนำ style ไปใช้กับ element ตัวไหน" และนั่นคือหน้าที่ของ Selector Selector คือส่วนแรกของ CSS rule ที่บอกว่า "จับ element ที่ตรงเงื่อนไขนี้ แล้วนำ style ที่อยู่ใน { } ไปใช้กับมัน" ถ้าไม่มี selector CSS จะไม่รู้ว่าควรไปทำงานกับส่วนไหนของหน้าเว็บเลย
Selector อ่านจากซ้ายไปขวา จับคู่กับ HTML element แล้วนำ style ใน { } ไปใช้
- Selector บอก CSS ว่า 'ต้องการตกแต่ง element ไหน'
- Selector อยู่ก่อน { } เสมอ เช่น p { color: red; } โดย p คือ selector
- CSS rule = Selector + Declaration Block ({ property: value; })
- ถ้า selector ไม่ตรงกับ element ใดเลย style จะไม่ถูกนำไปใช้
ทำไม Selector ถึงสำคัญ
Selector เป็นพื้นฐานที่สุดของการเขียน CSS ก่อนที่คุณจะกำหนด style ใด ๆ ได้ คุณต้องบอกก่อนว่า "style นี้จะไปใช้กับอะไร" ถ้าเขียน selector ผิด ปัญหาที่จะเจอมีทั้ง style ไม่ทำงาน style ไปโดน element ผิดตัว หรืออ่าน CSS แล้วตามไม่เจอว่า style ใดกระทบส่วนไหนของหน้า
- Style ไม่ทำงานเลย เพราะ selector ไม่ตรงกับ element จริงในหน้า
- Style ไปกระทบ element ผิดตัว เพราะเลือกกว้างเกินไป
- ไม่รู้ว่า style หายไปไหน เพราะเขียนชื่อต่างจาก HTML
- เขียน CSS เยอะแต่ดูไม่ออกว่า element ไหนถูก style ตัวไหน
ตัวอย่างจากชีวิตจริง
ลองนึกภาพว่าคุณอยู่ในห้องประชุมที่มีคนนั่งอยู่หลายคน แล้วคุณต้องการสั่งให้คนบางกลุ่มทำบางอย่าง "ทุกคนที่สวมแว่นตา ยกมือขึ้น" คล้าย Element Selector เพราะเรียกคนทุกคนที่มีคุณสมบัติแบบเดียวกัน "ทุกคนที่ติดป้ายชื่อสีเขียว ลุกขึ้นยืน" คล้าย Class Selector เพราะเรียกหลายคนที่มีป้ายกลุ่มเดียวกัน "คนที่มีบัตรหมายเลข 007 ออกมาข้างหน้า" คล้าย ID Selector เพราะเรียกคนเฉพาะเจาะจงคนเดียว "ทุกคนในห้องนี้ นั่งตรง" คล้าย Universal Selector เพราะใช้กับทุกคน "คุณ เขา และเธอ ช่วยกันยกโต๊ะด้วย" คล้าย Grouping Selector เพราะเรียกหลายเงื่อนไขในคำสั่งเดียว
Selector 5 แบบพื้นฐาน
CSS มี selector หลายสิบแบบ แต่ 5 แบบนี้คือพื้นฐานที่ต้องรู้ก่อน เพราะใช้บ่อยที่สุดในการเขียน CSS จริง ดูภาพรวมเพื่อจำ syntax และขอบเขตของแต่ละแบบ จากนั้นใช้ตารางเปรียบเทียบเป็นแผนที่เวลาต้องเลือก selector ให้เหมาะกับงาน
5 selector พื้นฐาน: จำสัญลักษณ์นำหน้าได้ก็เขียน selector ได้ทันที
| Selector | ไวยากรณ์ | จับ element ไหน | ใช้ซ้ำได้? |
|---|---|---|---|
| Element | p { } | ทุก <p> ในหน้า | - |
| Class | .name { } | ทุก element ที่มี class นั้น | ใช่ |
| ID | #name { } | element เดียวที่มี id นั้น | ไม่ |
| Universal | * { } | ทุก element ทั้งหมด | - |
| Grouping | h1, p { } | ทุก selector ที่แยกด้วย , | - |
การทำงานทีละขั้นตอน
เมื่อ Browser อ่าน CSS และพบ rule เช่น p { color: red; } มันทำงานเป็นลำดับดังนี้
- 1. Browser อ่าน HTML และสร้างต้นไม้ element หรือ DOM ทั้งหมด
- 2. Browser อ่าน CSS และพบ selector เช่น p
- 3. Browser ค้นหาใน DOM ว่ามี element ใดตรงกับ selector นั้นบ้าง
- 4. Style ใน { } ถูกนำไปใช้กับทุก element ที่จับได้
- 5. ถ้าไม่มี element ใดตรงกับ selector เลย หน้าเว็บจะไม่เปลี่ยน และไม่มี error แจ้ง
Element Selector
Element Selector ใช้ชื่อ tag HTML โดยตรง ไม่มีสัญลักษณ์พิเศษนำหน้า เมื่อเขียน p { } CSS จะจับทุก <p> element บนหน้านั้น ไม่ว่าจะอยู่ที่ไหนในหน้า ข้อดีคือเขียนง่ายและครอบคลุมทั้ง tag ส่วนข้อควรระวังคืออาจกว้างเกินไป ถ้ามี <p> หลายตัวที่ต้องการ style ต่างกัน
Class Selector
Class Selector ใช้จุด (.) นำหน้าชื่อ class เช่น .highlight จะจับทุก element ที่มี attribute class="highlight" ข้อสำคัญคือใน CSS เขียน .highlight มีจุด แต่ใน HTML เขียน class="highlight" ไม่มีจุด element ต่างประเภทกันรับ class เดียวกันได้ และ element เดียวมีหลาย class ได้โดยคั่นด้วยช่องว่าง วิธีนี้คือวิธีที่แนะนำมากที่สุดสำหรับการเขียน CSS จริง เพราะใช้ซ้ำได้และควบคุมขอบเขตได้ดีกว่า element selector
ID Selector
ID Selector ใช้ # นำหน้าชื่อ id เช่น #main-header จะจับ element ที่มี attribute id="main-header" กฎสำคัญคือ id ต้องไม่ซ้ำกันในหน้าเดียวกัน มีได้เพียง element เดียวต่อ id ต่อหน้า ข้อดีคือเจาะจงมากและไม่กระทบ element อื่น ส่วนข้อควรระวังคือใช้ซ้ำไม่ได้และมี specificity สูง ทำให้ override ยาก
Universal Selector
Universal Selector ใช้ดอกจัน (*) และจับทุก element บนหน้าเว็บโดยไม่มีข้อยกเว้น ใช้บ่อยที่สุดสำหรับ CSS Reset หรือกำหนด box-sizing ให้ทุก element ข้อควรระวังคือเพราะจับทุก element จึงควรใช้เฉพาะเมื่อต้องการกำหนดพฤติกรรมพื้นฐานทั่วทั้งหน้า
Grouping Selector
Grouping Selector ใช้เครื่องหมายจุลภาค (,) คั่นระหว่าง selector หลายตัว เพื่อใช้ style เดียวกันกับทุก selector นั้น แทนที่จะเขียนซ้ำหลายครั้ง ให้รวมไว้ใน rule เดียว ผลลัพธ์เหมือนกันทุกประการแต่โค้ดสั้นและดูแลต่อได้ง่ายกว่า
ลองเล่นเอง: Playground รวม
เปรียบเทียบ: Class vs ID
สองสิ่งที่ผู้เริ่มต้นมักสับสนมากที่สุดคือ class กับ id ดูตารางนี้เพื่อตัดสินใจว่าควรใช้แบบไหน
| หัวข้อ | Class (.name) | ID (#name) |
|---|---|---|
| สัญลักษณ์นำหน้า | . (จุด) | # |
| ใช้ซ้ำหลาย element ได้? | ใช่ ใช้ซ้ำได้ไม่จำกัด | ไม่ มีได้ element เดียวต่อหน้า |
| element เดียวมีหลายอันได้? | ใช่ เช่น class="a b c" | ไม่ มีได้แค่ id เดียว |
| Specificity | ต่ำกว่า | สูงกว่า |
| เหมาะกับ | style ที่ใช้ซ้ำหลายที่ | element ที่มีเอกลักษณ์เฉพาะ |
| ตัวอย่าง | .btn, .card, .highlight | #header, #main-nav, #footer |
ข้อผิดพลาดที่ผู้เริ่มต้นมักเจอ
ข้อผิดพลาดเหล่านี้พบบ่อยมาก และทำให้ style ไม่ทำงานโดยไม่มี error แจ้งใน browser
- ลืมใส่จุด (.) หน้า class เช่นเขียน highlight แทน .highlight ทำให้ CSS ตีความว่าเป็น element ชื่อ highlight
- ลืมใส่ # หน้า id เช่นเขียน header แทน #header ทำให้ CSS จับ tag <header> แทน element ที่มี id='header'
- ใช้ id ซ้ำในหน้าเดียวกัน ทำให้ HTML invalid และ JavaScript มักจับได้แค่ตัวแรก
- พิมพ์ชื่อ class ผิดตัวพิมพ์เล็กใหญ่ เช่น .MyClass ไม่ตรงกับ .myclass
- มีช่องว่างในชื่อ class ใน CSS เช่น .my class { } ใช้ไม่ได้ ต้องใช้ .my-class หรือ .myclass
เมื่อไหร่ควรใช้แบบไหน
- Element Selector: ใช้เมื่อต้องการกำหนด style พื้นฐานให้ทุก element ของ tag นั้น เช่น reset margin ของ h1 ทั้งหมด
- Class Selector: ใช้เป็นค่าเริ่มต้นสำหรับ style ที่ต้องการใช้ซ้ำ ใช้บ่อยที่สุดในการเขียน CSS จริง
- ID Selector: ใช้เฉพาะกับ element ที่มีเอกลักษณ์จริง ๆ ในหน้า เช่น #main-nav หรือ #skip-to-content
- Universal Selector: ใช้สำหรับ CSS Reset หรือกำหนดพฤติกรรมพื้นฐาน เช่น * { box-sizing: border-box; }
- Grouping Selector: ใช้เมื่อ selector หลายตัวมี style เหมือนกัน เพื่อลดการเขียนซ้ำ
สรุปท้ายบท
- Selector คือส่วนที่บอก CSS ว่าจะนำ style ไปใช้กับ element ไหน และอยู่ก่อน { } เสมอ
- Element ใช้ชื่อ tag เช่น p { } เพื่อจับทุก <p>
- Class ขึ้นต้นด้วย . เช่น .card { } ใช้ซ้ำได้และยืดหยุ่นที่สุด
- ID ขึ้นต้นด้วย # เช่น #header { } ใช้กับ element เดียวต่อหน้า
- Universal ใช้ * { } เพื่อจับทุก element ทั้งหมด
- Grouping คั่น selector ด้วย , เช่น h1, p { } เพื่อลดการเขียนซ้ำ
- ถ้า selector ไม่ตรงกับ element style จะไม่ทำงานและไม่มี error บอก ต้องตรวจสอบเอง
- Class เป็น selector ที่ใช้บ่อยที่สุดในการเขียน CSS จริง
Lab 1: Element Selector
เป้าหมาย: ใช้ Element Selector เพื่อ style ทุก <p> ในหน้า โจทย์: 1. เขียน selector p 2. กำหนด background-color เป็น #e0f2fe
Lab 2: Class Selector
เป้าหมาย: ใช้ Class Selector เพื่อ style เฉพาะ element ที่มี class="intro" โจทย์: 1. เขียน selector .intro 2. กำหนด background-color เป็น #fef9c3
Lab 3: ID Selector
เป้าหมาย: ใช้ ID Selector เพื่อ style nav ที่มี id="main-nav" โจทย์: 1. เขียน selector #main-nav 2. กำหนด background-color เป็น #f1f5f9
Lab 4: Universal Selector
เป้าหมาย: ใช้ Universal Selector เพื่อกำหนดสีพื้นหลังให้ทุก element โจทย์: 1. เขียน selector * 2. กำหนด background-color เป็น #f8fafc
Lab 5: Grouping Selector
เป้าหมาย: ใช้ Grouping Selector เพื่อให้หลาย selector ใช้ declaration เดียวกัน โจทย์: 1. เขียน grouping selector h1, #site-footer p 2. กำหนด background-color เป็น #dcfce7