Fundamentals
Selector basics (element, class, id)
แยกแยะ selector พื้นฐาน 5 แบบ — element, class, id, universal และ grouping — และเลือกชนิดให้ตรงกับกลุ่ม element ที่ต้องการตกแต่ง
1) ปัญหา: เขียน rule ถูกต้อง แต่ style ไปโดน element ผิดตัว
หน้าเว็บหนึ่งมี element นับสิบ: <h1>, <p> หลายตัว, ปุ่ม 2 ปุ่ม และกล่องหมายเหตุ — คุณอยากให้ "เฉพาะย่อหน้าแนะนำตัว" เป็นสีน้ำเงิน แล้วเขียน rule นี้: p { color: blue; } ผลลัพธ์คือย่อหน้าทุกตัวในหน้าเปลี่ยนเป็นสีน้ำเงิน — เพราะ rule นี้จับ <p> ทุกตัว ไม่มีทางบอกว่า "เฉพาะตัวนั้น ตัวนี้"
p { } จับทุก <p> ในหน้า — ถ้าต้องการเฉพาะบางย่อหน้า ต้องมีวิธีเลือกที่เจาะจงกว่านี้
- style ไม่ทำงานเลย — selector ไม่ตรงกับ element จริงในหน้า (เช่น พิมพ์ชื่อ class ผิด)
- style ไปโดน element ผิดตัว — เลือกกว้างเกินกว่าที่ต้องการ
- อ่าน CSS แล้วตามไม่เจอว่า rule นี้มีผลกับส่วนใดของหน้าบ้าง
2) แนวคิดหลัก: selector คือส่วนของ rule ที่บอกว่า "จะตกแต่งตัวไหน"
selector คือส่วนแรกของ rule ที่อยู่ก่อน { } — มันคือ "เงื่อนไข" ที่เบราว์เซอร์ใช้ไล่เทียบกับ element ทุกตัวใน DOM: element ตัวไหนตรงเงื่อนไข ตัวนั้นได้ declaration ใน { } ไปใช้ ถ้าไม่มีตัวไหนตรงเลย rule นั้นก็ไม่เกิดผล และไม่มี error เตือน selector มีหลายชนิด บทนี้เรียน 5 แบบที่ใช้บ่อยที่สุด โดย 3 แบบแรกคือตัวหลักที่ใช้ทุกวัน
- rule = selector + declaration block — selector บอก "ใคร" ส่วน declaration block บอก "เปลี่ยนอะไร"
- selector ตรงกับ element ได้หลายตัวพร้อมกัน — ไม่จำกัดแค่ตัวเดียว
- ไม่ตรง = ไม่มีผล ไม่มี error — ต้องตรวจเองว่า element ใน HTML มีชื่อตรงกับที่เขียนหรือไม่
3) พื้นฐาน 3 แบบที่ใช้ทุกวัน: element, class และ id
selector 3 แบบแรกต่างกันที่ "ความกว้างของเงื่อนไข": element จับทั้งแท็ก class จับกลุ่มที่ติดป้ายเดียวกัน และ id จับ element เดียวที่มีเอกลักษณ์
| ชนิด | เขียนใน CSS | จับ element แบบไหน | ใช้ซ้ำได้ |
|---|---|---|---|
| Element selector | p { } | ทุก element ที่เป็นแท็ก <p> | จับทั้งแท็กอัตโนมัติ |
| Class selector | .card { } | ทุก element ที่มี class="card" | ใช่ — ใช้กับ element กี่ตัวก็ได้ |
| ID selector | #main-header { } | element ที่มี id="main-header" | ไม่ — id ต้องไม่ซ้ำกันในหน้า |
สังเกต: class เขียนด้วย . และ id เขียนด้วย # ใน CSS — แต่ใน HTML เขียน class="card" และ id="main-header" โดยไม่มีจุดหรือ #
4) อีก 2 แบบที่พบบ่อย: universal (*) และ grouping (,)
อีก 2 ชนิดที่เจอเป็นประจำเวลาอ่าน CSS จริง (หมายเหตุ: ในแบบฝึกหัดจะมี property เช่น line-height และ font-weight ซึ่งจะเรียนเต็มในบท Typography & Colors — บทนี้เน้นการเลือก element ด้วย selector): - **Universal selector (*)** — จับทุก element ในหน้า ใช้นิยาม "ค่าเริ่มต้น" ให้ทั้งหน้า เช่น ปรับการคิดขนาดกล่อง (box-sizing เรียนเต็มในเฟส Box Model) หรือรีเซ็ตระยะห่าง - **Grouping selector (,)** — รวม selector หลายตัวใน rule เดียว เมื่ออยากให้ element ต่างชนิดกันได้ style ชุดเดียวกัน ลดการเขียนซ้ำ
เครื่องหมาย , คั่น selector ที่เทียบเท่ากัน — rule หลังเท่ากับเขียน h1 { }, h2 { }, p { } แยกกัน 3 rule
- * กว้างที่สุด — ใช้เฉพาะงานที่อยากให้ "ทุกตัว" ได้ค่าเดียวกัน เช่น ค่าเริ่มต้นทั้งหน้า
- grouping ไม่ได้สร้าง element ใหม่ — แค่รวมหลายเงื่อนไขไว้ใน rule เดียว
- selector แต่ละชนิดมีน้ำหนัก (specificity) ไม่เท่ากันเมื่อ rule ชนกัน — เรียนในบท 'Specificity'
5) เขียนผิด vs เขียนถูก: class ที่ลืมจุด
**ทายก่อนดูเฉลย:** HTML มี <p class="intro">…</p> อยู่หนึ่งตัว ถ้าเขียน CSS เป็น intro { color: blue; } (ไม่มีจุดนำหน้า) ข้อความในย่อหน้านั้นจะเปลี่ยนเป็นสีน้ำเงินหรือไม่?
ลืมจุดหน้า class กับเขียนให้ตรงชนิด
selector ผิดชนิด = style ไม่ทำงานหรือไปโดนผิดตัว — ความผิดพลาดที่พบบ่อยที่สุดของมือใหม่
CSS ตีความ intro เป็นชื่อ element — ไม่มี <intro> ใน HTML rule จึงไม่เกิดผล และไม่มี error เตือน
.intro จับ <p class="intro"> พอดี — style ถึงเป้าหมาย และไม่แตะ <p> ตัวอื่นที่ไม่มี class นี้
- class ใน CSS ต้องมีจุดนำหน้า (.intro) — ส่วนใน HTML เขียน class="intro" โดยไม่มีจุด
- id ใน CSS ต้องมี # นำหน้า (#main-header) — ส่วนใน HTML เขียน id="main-header" โดยไม่มี #
- element selector เหมาะกับ "ทุกตัวของแท็กนั้น" — ถ้าต้องการเฉพาะบางตัว ให้เลือก class หรือ id
Lab 1 — ทำตาม: เขียน rule ให้ทุกย่อหน้าของบทความ
หน้าเว็บบทความท่องเที่ยวต้องการให้ย่อหน้าทุกตัวอ่านง่าย — งานนี้ทุก <p> ในหน้าได้ style ชุดเดียวกัน จึงเป็นงานของ element selector ให้เขียน rule ตามสเปกในแท็บ CSS โดยทำตามรูปแบบ rule ในหัวข้อที่ 3 ของบทเรียน
Lab 2 — ปรับ: เพิ่ม class ให้ HTML เพื่อให้ rule .warning ทำงาน
rule .warning ในแท็บ CSS เขียนไว้แล้ว แต่ยังไม่มี element ไหนมี class="warning" — rule จึงไม่โดน element เลย ให้เพิ่ม class="warning" ให้กับเฉพาะย่อหน้าเตือนในหน้า ยืนยันคำสั่งซื้อ และห้ามแก้ rule ในแท็บ CSS
Lab 3 — แก้เอง: เขียน rule ให้กล่องราคาพิเศษด้วย id
หน้าราคามีกล่องแพ็กเกจ 2 ใบที่โครงสร้างเหมือนกัน แต่กล่อง "รายปี — ลด 20%" มี id="special-price" อยู่แล้วใน HTML และเป็นกล่องเดียวที่ต้องได้กรอบสีส้ม — ถ้าใช้ element selector หรือ class selector จะโดนกล่องทั้งสองใบ ให้เขียน rule ใหม่ในแท็บ CSS โดยเลือกด้วย id
ตรวจความเข้าใจและก้าวต่อไป
ตอบคำถามสั้น ๆ เพื่อเช็กว่าคุณเลือกชนิดของ selector ให้ตรงกับกลุ่ม element ที่ต้องการ และเขียน class กับ id ใน HTML ได้ถูกต้องหรือยัง
ตรวจความเข้าใจ: selector พื้นฐาน
หน้า HTML มี <p> อยู่ 5 ตัว อยากให้เฉพาะย่อหน้าที่เป็น "คำเตือน" เป็นสีแดง และคำเตือนอาจมีหลายจุด — ควรใช้ selector แบบใด?
จะให้ element หนึ่งมี class ชื่อ card — ควรเขียนใน HTML อย่างไร?
ข้อใดเป็นจริงเกี่ยวกับ id selector (เลือกทุกข้อที่ถูก)
selector ที่จับทุก element ในหน้าโดยไม่มีข้อยกเว้น ใช้สัญลักษณ์ ______
- selector คือเงื่อนไขที่เบราว์เซอร์ไล่เทียบกับ element — ตัวที่ตรงได้ style ไปใช้ ตัวที่ไม่ตรงไม่มีผล
- element (p) จับทั้งแท็ก · class (.card) จับกลุ่มที่ใช้ซ้ำ · id (#main-header) จับ element เดียว
- * จับทุก element ในหน้า และ , รวมหลาย selector ไว้ใน rule เดียว
- จุดหน้า class และ # หน้า id ใช้ใน CSS เท่านั้น — ใน HTML เขียน class="card" และ id="main-header" โดยไม่มีสัญลักษณ์
- ก้าวต่อไป: ในบทถัดไป 'Specificity' เราจะเรียนว่าเมื่อหลาย rule ตรงกับ element เดียวกัน rule ไหนชนะ — เพราะ selector แต่ละชนิดมีน้ำหนักต่างกัน (สมมติฐานความรู้ก่อนหน้า: แยกแยะ element/class/id selector และเขียน class กับ id ใน HTML ได้จากบทนี้ เพราะ specificity คือการเทียบน้ำหนักระหว่าง selector ที่คุณเลือกใช้)