Selectors

ก่อนที่ CSS จะสไตล์อะไรได้ ต้องรู้ก่อนว่า กำลังจะสไตล์อะไร กลไกที่ใช้ระบุเป้าหมายนั้นเรียกว่า selector คุณเขียน selector ไว้หน้าวงเล็บปีกกา แล้ว browser จะนำสไตล์ข้างในไปใส่ให้ทุก element ที่ตรงกัน

selector พื้นฐานมีสามแบบที่ดีไซเนอร์ทุกคนควรรู้ แต่ละแบบสอดคล้องกับสิ่งที่คุณใช้อยู่แล้วใน Figma

Element selector

p { color: gray; }

Element selector ใช้ชื่อแท็กโดยตรง ไม่มีสัญลักษณ์นำหน้า จะจับคู่กับ ทุก element ประเภทนั้นในหน้า การเขียน h2 { } ก็เหมือนกับการเข้าไปใน Figma แล้วเปลี่ยน text style ให้ทุก layer ที่ใช้ style เดียวกัน — กฎเดียว เปลี่ยนทั้งหมดทันที

ใช้ element selector สำหรับค่าเริ่มต้น เช่น font ของ body ขนาด heading หรือสีของ link

Class selector

.card { background: white; border-radius: 12px; }

Class selector ขึ้นต้นด้วยจุด (.) และจับคู่กับทุก element ที่มี attribute class ตรงกัน class เดียวกันจะใส่ให้ element ไหนก็ได้กี่ตัวก็ได้ — <div class="card">, <section class="card">, <article class="card"> — ทุกตัวได้รับสไตล์เดียวกัน

นี่คือสิ่งที่ใกล้เคียงที่สุดกับ component หรือ shared style ใน Figma ในโลก CSS: กำหนดหน้าตาครั้งเดียว แล้วนำไปใช้ซ้ำได้ทุกที่ คุณยังสามารถซ้อน class หลายอันบน element เดียวได้:

<div class="card featured">…</div>

element นั้นจะได้รับสไตล์จากทั้ง .card และ .featured ทำให้คุณซ้อนความแตกต่างได้ — เหมือน component variant นั่นเอง

ID selector

#hero { background: #7C3AED; color: white; }

ID selector ขึ้นต้นด้วย # และจับคู่กับ element เดียว ที่มี attribute id ตรงกัน ID ต้องไม่ซ้ำกันในหน้าเดียว — มีได้แค่ element เดียวที่ใช้ id นั้น ลองนึกถึง layer ที่ตั้งชื่อเฉพาะและมีชิ้นเดียวบน canvas Figma ของคุณ ใช้ ID สำหรับสิ่งที่ไม่ซ้ำจริงๆ เช่น hero section หลัก, navigation, หรือ footer

สรุปเปรียบเทียบกับ Figma

CSS selector	เทียบกับ Figma
`p { }`	สไตล์ text layer ทุกอันที่เป็นประเภทเดียวกัน
`.card { }`	Component / shared style ที่ใช้ซ้ำหลาย instance
`#hero { }`	Frame ที่ตั้งชื่อเฉพาะ — มีอันเดียวในหน้า

<h2>My Portfolio</h2>

<div class="card">
  <h3>Brand Identity</h3>
  <p>Logo, color palette, and typography system.</p>
</div>

<div class="card featured" id="hero">
  <h3>Featured Project</h3>
  <p>End-to-end product redesign — research to handoff.</p>
</div>

<div class="card">
  <h3>Icon Set</h3>
  <p>120 custom icons designed on a 24 px grid.</p>
</div>

ลองเพิ่ม element ที่สองด้วย id="hero" แล้วสังเกตว่า CSS ยังคงสไตล์ให้อยู่ — แต่โดยหลักการแล้ว ID ควรไม่ซ้ำกัน จากนั้นลองเพิ่ม class ใหม่ชื่อ secondary ให้การ์ดใบหนึ่ง แล้วเขียน rule .secondary { } เพื่อให้มี border color ที่ต่างออกไป

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ตั้งชื่อ class ตาม “ลักษณะที่เห็น” เช่น .red-button แทนความหมาย เช่น .btn-danger ทำให้พังเมื่อเปลี่ยนสี
ใช้ id selector มากเกินไปทำให้ override ยาก

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “component ที่ตั้งชื่อใน Figma” แต่ developer แปลชื่อ layer เป็น class name ที่สื่อความหมายและ reuse ได้ข้าม component

💡 ตัวอย่างจากของจริง

Shopify Polaris design system ตั้งชื่อ class ตาม role (.Polaris-Button--primary) ไม่ใช่ตามสี ทำให้เปลี่ยน theme ได้โดยไม่ต้องแก้ชื่อ class