Fundamentals
Pseudo-element Selectors
ใช้ pseudo-element — ::before/::after, ::first-letter/::first-line, ::placeholder และ ::selection — เพื่อสร้างหรือเลือกส่วนย่อยของ element โดยไม่ต้องแก้ HTML
1) บทบาท: "ส่วนย่อย" ที่ HTML ไม่มี — ต้องสร้างหรือเลือกจาก CSS
บางครั้ง style ที่ต้องการไม่ได้อยู่ที่ตัว element ทั้งก้อน แต่อยู่ที่ "ส่วนย่อย" หรือ "เนื้อหาเสริม" ที่ไม่มีใน HTML เช่น สัญลักษณ์นำหน้าหัวข้อ ตัวอักษรตัวแรกของย่อหน้าที่ใหญ่เป็นพิเศษ หรือสีของข้อความที่ผู้ใช้ลากเลือก การไปเพิ่ม <span> ให้ทุกจุดใน HTML ก็ทำได้ แต่เนื้อหาตกแต่งแบบนี้ไม่ควรอยู่ในโครงสร้างหน้า — pseudo-element คือวิธีบอก CSS ให้สร้างหรือเลือกส่วนนั้นเอง
| เปรียบเทียบ | Pseudo-class | Pseudo-element |
|---|---|---|
| เครื่องหมาย | : (โคลอนตัวเดียว) | :: (โคลอนสองตัว) |
| ทำอะไร | เลือก element ทั้งตัวตามสถานะ/ตำแหน่ง | สร้างหรือเลือกส่วนย่อยของ element |
| ตัวอย่าง | :hover, :first-child, :checked | ::before, ::first-letter, ::selection |
| แก้ HTML หรือไม่ | ไม่แก้ | ไม่แก้ — ส่วนย่อยถูกสร้างจาก CSS |
จำง่าย ๆ ว่า: : ตัวเดียวเลือก element ที่มีอยู่ — :: สองตัวสร้างสิ่งใหม่หรือชี้ส่วนย่อยที่ HTML เขียนถึงไม่ได้
2) ::before และ ::after — เพิ่มเนื้อหาเสริมข้างหน้าและข้างหลัง
::before กับ ::after สร้าง "element เสมือน" ขึ้นมาก่อนและหลังเนื้อหาของ element ที่ถูกเลือก — เราเขียน style ให้มันได้ทุกอย่าง แต่ไม่ต้องเพิ่มอะไรใน HTML กฎข้อแรกที่ต้องจำให้ขึ้นใจ: **ต้องมี property content เสมอ** ต่อให้ไม่ต้องการข้อความก็ต้องใส่ content: "" — ถ้าไม่มี content pseudo-element จะไม่ถูกสร้างขึ้นมาเลย
content รับข้อความในเครื่องหมายคำพูด — ถ้าไม่อยากได้ข้อความให้ใช้ content: "" แล้วตกแต่งด้วย property อื่น (หมายเหตุ: property อย่าง font-size และ background ที่ใช้ในตัวอย่างและแบบฝึกหัด จะเรียนเต็มในบท Typography & Colors — บทนี้เน้นการใช้งาน pseudo-element)
3) ::first-letter และ ::first-line — เลือกส่วนของข้อความ
::first-letter เลือกตัวอักษรตัวแรกของ block element — ใช้ทำตัวอักษรเปิดย่อหน้า (drop cap) แบบที่เห็นในบทความนิตยสาร ::first-line เลือกเฉพาะบรรทัดแรกของข้อความตามความกว้างจริงบนหน้าจอ — ไม่ใช่บรรทัดแรกในโค้ด ถ้าปรับขนาดหน้าต่าง บรรทัดที่ถูกเลือกจะเปลี่ยนตาม
::first-line style เฉพาะบรรทัดแรกที่เบราว์เซอร์จัดวางจริง — ไม่เกี่ยวกับว่าโค้ด HTML ขึ้นบรรทัดใหม่ตรงไหน
4) ::placeholder และ ::selection — ส่วนที่เบราว์เซอร์จัดการให้
สอง pseudo-element นี้เลือกส่วนที่เบราว์เซอร์สร้างและจัดการให้เอง: **::placeholder** — ข้อความสีจาง ๆ ในช่องกรอกที่แสดงก่อนผู้ใช้พิมพ์ **::selection** — ข้อความที่ผู้ใช้กำลังลากเลือกอยู่ (highlight) — ใช้ปรับสีให้เข้ากับแบรนด์ได้ทั้งหน้า
::selection ใช้ได้กับ property จำกัดอย่างสีและพื้นหลัง — เขียนครั้งเดียวทั้งหน้า หรือจำกัดด้วย selector เช่น .summary::selection
5) เขียนผิด vs เขียนถูก: ลืม content ใน ::before/::after
ความผิดพลาดที่พบบ่อยที่สุดของ pseudo-element คือการเขียน style ครบทุกอย่างแต่ลืม property content — pseudo-element ไม่ถูกสร้างขึ้นมาเลย แม้จะกำหนดสี ขนาด หรือพื้นหลังไว้สวยงามแค่ไหนก็ตาม **ทายก่อนดูเฉลย:** หัวข้อ .announcement มี rule ::after ที่กำหนดสีกับความหนาตัวอักษรไว้ครบ — ฝั่งไหนจะเห็นข้อความเสริมต่อท้ายหัวข้อจริง
มี style ครบ แต่ไม่มี content
ฝั่งซ้ายกำหนดสีและน้ำหนักตัวอักษรให้ ::after แต่ลืม content — ไม่มีอะไรปรากฏ ฝั่งขวาเพิ่ม content: " →" ขั้นตอนเดียวก็เห็นผล
ไม่มี content = ไม่มี pseudo-element — property อื่น ๆ ที่กำหนดจึงไม่มีความหมาย
content เป็นเงื่อนไขการมีอยู่ของ ::before/::after — ใส่ไว้ก่อนเสมอ แม้จะเป็น content: ""
Lab 1 — ทำตาม: แต่งหัวข้อด้วย ::before และ ::after
ป้ายประกาศบทเรียนใหม่ต้องการข้อความ "NEW " นำหน้าหัวข้อ และลูกศรสีน้ำเงินต่อท้าย — ให้เขียน rule ตามสเปกในแท็บ CSS ด้วย ::before และ ::after โดยไม่แตะ HTML
Lab 2 — แก้: drop cap ที่รั่วไปทุกย่อหน้า และ placeholder ที่หายไป
หน้าเรื่องมีสองจุดที่ต้องแก้: 1) drop cap (ตัวอักษรแรกใหญ่) ตอนนี้เขียนเป็น .story p::first-letter จึงไปโดนทุกย่อหน้าในเรื่อง — สเปกต้องการให้มีเฉพาะย่อหน้าเปิด .lead 2) placeholder ของช่องค้นหายังเป็นสี default — ให้กำหนดสีเทา #94a3b8
Lab 3 — แก้โจทย์: เลือก pseudo-element ให้ตรงกับแต่ละโซน
การ์ดแนะนำหนังสือมีสามโซนที่สเปกบอกเป็นผลลัพธ์ — คุณต้องเลือก pseudo-element เอง: ดาวนำหน้าหัวข้อการ์ด, บรรทัดแรกของย่อหน้าเปิดเป็นสีเทาเข้ม, และข้อความในกล่องสรุปที่ถูกลากเลือกมีพื้นเหลืองอ่อน
ตรวจความเข้าใจและก้าวต่อไป
ตอบคำถามสั้น ๆ เพื่อเช็กว่าคุณแยก pseudo-element (โคลอนสองตัว) ออกจาก pseudo-class (โคลอนตัวเดียว) และรู้ว่า pseudo-element แต่ละตัวเลือกส่วนไหนของ element ก่อนไปเรียนการตั้งชื่อ class ในบทถัดไป
ตรวจความเข้าใจ: Pseudo-element Selectors
ข้อใดคือเงื่อนไขที่ทำให้ ::before หรือ ::after ถูกสร้างขึ้นมาจริง
ต้องการให้เฉพาะบรรทัดแรกของย่อหน้าเปิดมีสีเข้มขึ้น ควรใช้ pseudo-element ใด
ข้อใดเป็นจริงเกี่ยวกับ pseudo-element (เลือกทุกข้อที่ถูก)
pseudo-element เขียนด้วยเครื่องหมายอะไร เช่น ใน .label::before? ตอบเป็นเครื่องหมาย
- pseudo-element เขียนด้วยโคลอนสองตัว (::) — สร้างหรือเลือกส่วนย่อยของ element โดยไม่แก้ HTML
- ::before/::after เพิ่มเนื้อหาเสริม — ต้องมี content เสมอ
- ::first-letter เลือกตัวอักษรแรก · ::first-line เลือกบรรทัดแรกตาม layout จริง
- ::placeholder ปรับข้อความในช่องกรอก · ::selection ปรับสี highlight ตอนลากเลือก
- ก้าวต่อไป: ในบทถัดไป 'การตั้งชื่อ Class ที่ดี' เราจะเรียนวิธีตั้งชื่อ class ให้อ่านแล้วรู้บทบาทของ element โดยไม่ต้องเดาจากหน้าตา (สมมติฐานความรู้ก่อนหน้า: เขียน selector แบบ class และ pseudo-element ได้จากบทนี้ — เพราะการตั้งชื่อ class ที่ดีคือการตั้งชื่อจากบทบาท เช่น .error-message หรือ .card-title ซึ่งเป็น class เดียวกับที่ pseudo-element ต่อท้ายเพื่อเลือกส่วนย่อยของ element)