CSS Selector — tag, class, id เลือกอันไหนเมื่อไหร่

Google Chrome 151.0.7922.174  # ใช้ตรวจสีที่ออกมาจริงทุกตัวอย่างในบทนี้
MDN — CSS selectors / Specificity  # ใช้ตรวจว่าตัวเลขน้ำหนักถูกต้อง

1 · CSS คืออะไร — HTML บอกว่า "มีอะไร" CSS บอกว่า "หน้าตายังไง"

สไลด์หน้า 28 นิยาม CSS ไว้บรรทัดเดียวว่า "controls how your website looks" — คุมว่าเว็บของคุณหน้าตาเป็นยังไง
ชื่อเต็มของมันคือ Cascading Style Sheets

แปดบทที่ผ่านมาคุณเขียน HTML ซึ่งตอบคำถามว่า "หน้านี้มีอะไรบ้าง" — มีหัวข้อ มีย่อหน้า มีลิงก์ มีฟอร์ม
แต่ HTML ไม่ได้ตอบว่าหัวข้อควรตัวใหญ่แค่ไหน สีอะไร ห่างจากย่อหน้าเท่าไหร่ — ตรงนั้นเป็นงานของ CSS ล้วน ๆ

ลองดูของจริง กฎ CSS ข้างล่างนี้ยกมาจากสไลด์หน้า 28 ทั้งก้อน ส่วน HTML สองบรรทัดล่างผมถอดมาจากสกรีนช็อตหน้า 32 ที่เป็นผลของกฎชุดนี้ (เปลี่ยนแค่ชื่อคน):

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #303030;
    font-size: 16px;
  }

  h1 {
    font-weight: 600;
    font-size: 48px;
    line-height: 1;
    font-family: "Times New Roman", Times, serif;
    color: olive;
  }
</style>

<h1>Somchai Jaidee</h1>
<p>I'm a software developer</p>

สังเกตว่า HTML สองบรรทัดล่างไม่ได้บอกอะไรเรื่องสีหรือขนาดเลย มันบอกแค่ว่า "อันนี้เป็นหัวข้อใหญ่ อันนี้เป็นย่อหน้า"
ส่วนที่ทำให้หัวข้อกลายเป็นตัวหนังสือ serif สีเขียวขี้ม้าขนาด 48px คือกฎ CSS ข้างบนล้วน ๆ
ลบ <style> ทิ้ง เนื้อหายังอยู่ครบ แค่หน้าตากลับไปเป็นค่าเริ่มต้นของเบราว์เซอร์

2 · หน้าตาของกฎ CSS หนึ่งข้อ — อ่านให้ออกก่อน แล้วที่เหลือง่ายหมด

ก้อนหนึ่งก้อนข้างบนนั้นเรียกว่า กฎหนึ่งข้อ และมันมีแค่สองส่วนเสมอ ไม่มีมากกว่านี้:

ฝั่งซ้ายของปีกกาคือ "จะจัดใคร" · ฝั่งในปีกกาคือ "จัดยังไง" เขียนได้หลายคำสั่ง แต่ละคำสั่งลงท้ายด้วย ;
ทั้งบทนี้เราจะสนใจแค่ฝั่งซ้าย เพราะฝั่งขวา (สี ขนาด ระยะห่าง) ค่อยไล่จำทีหลังก็ได้ ไม่มีอะไรให้เข้าใจผิด แต่ฝั่งซ้ายมีเยอะมาก

3 · selector สามแบบที่ต้องรู้ก่อนอย่างอื่น

สไลด์หน้า 30 วางสามแบบนี้ไว้ข้างกันพอดี แล้วหน้า 31–36 ค่อยขยายทีละแบบ ผมสรุปมาให้ในตารางเดียว:

ตัวอย่างข้างล่างนี้ผมประกอบขึ้นจากสไลด์หน้า 33–36 — หน้าโปรไฟล์ที่มีสอง section โดยเอา .sub-title จากหน้า 33 มารวมกับ #about-me จากหน้า 35 แล้วเติมกฎ tag ของ h4 เข้าไปเองเพื่อให้เห็นครบทั้งสามแบบในตัวอย่างเดียว (สไลด์ใช้ h3 เป็นหัวข้อย่อย ผมเปลี่ยนเป็น h4 เฉย ๆ เพราะหน้าบทเรียนที่คุณอ่านอยู่นี้ใช้ h3 เป็นหัวข้อจริงของตัวเองอยู่แล้ว — เปลี่ยนแค่ชื่อ tag ไม่ได้เปลี่ยนหลักการอะไรเลย):

<style>
  /* tag — จับ h4 ทุกตัวในหน้า */
  h4 { font-family: Georgia, serif; }

  /* class — จับทุกตัวที่ติดป้าย sub-title (ที่นี่มีสองตัว) */
  .sub-title { font-size: 24px; }

  /* id — จับตัวเดียว คือกล่องที่ id ชื่อ about-me */
  #about-me { background-color: #efefbc; padding: 16px; }
</style>

<div id="about-me">
  <h4 class="sub-title">About Me</h4>
  <p>Product design and web development.</p>
</div>
<div id="experience">
  <h4 class="sub-title">Experience</h4>
  <p>Dec 2023 - Present</p>
</div>

อ่านผลที่ออกมาแล้วจะเห็นความต่างของสามแบบชัดมาก:

• h4 เป็น tag → หัวข้อ ทั้งสองอัน เปลี่ยนฟอนต์ โดยที่เราไม่ต้องไปแตะ HTML เลยสักตัวอักษร
• .sub-title เป็น class → หัวข้อทั้งสองอันโตขึ้นเหมือนกัน เพราะเราไปติดป้ายเดียวกันไว้ให้ทั้งคู่ · ถ้าพรุ่งนี้มี section ที่สาม แค่ติดป้ายเดิมก็ได้หน้าตาเดิมทันที
• #about-me เป็น id → มีแค่กล่องบนที่พื้นเปลี่ยนสี กล่อง Experience ไม่ขยับเลย แม้จะเป็น div เหมือนกันเป๊ะ

4 · สองกฎสั่งคนละสีใส่ตัวเดียวกัน — ใครชนะ

ตรงนี้คือจุดที่สไลด์ข้ามไป แต่เป็นจุดที่คุณจะเจอภายในวันแรกที่เขียน CSS จริง
สมมติหัวข้อย่อยตัวหนึ่ง (<h4>) ติดทั้ง class และ id แล้วมีกฎสามข้อสั่งสีคนละสี — สีไหนออกมา?

<style>
  h4 { color: teal; }
  .warning { color: orange; }
  #top { color: crimson; }
</style>

<h4>ผมมีแค่ tag</h4>
<h4 class="warning">ผมมี class ด้วย</h4>
<h4 class="warning" id="top">ผมมีครบทั้งสาม</h4>

ผมวัดสีที่ออกมาจริงด้วย getComputedStyle() ใน Chrome ได้ตามนี้:

บรรทัด 1 (tag เปล่า)        rgb(0, 128, 128)   # teal
บรรทัด 2 (tag + class)      rgb(255, 165, 0)   # orange — class ทับ tag
บรรทัด 3 (tag + class + id) rgb(220, 20, 60)   # crimson — id ทับทั้งคู่

บรรทัดที่ 3 คือคำตอบของทั้งบท: id ชนะ class · class ชนะ tag
และที่สำคัญกว่านั้น — มันไม่เกี่ยวกับว่าใครเขียนก่อนเขียนหลังเลย ลองสลับสามบรรทัดนั้นให้ #top ขึ้นก่อนสุด ผลก็ยัง crimson เหมือนเดิม (ผมรันมาแล้ว: id เขียนบรรทัดแรก class เขียนบรรทัดสุดท้าย ยังได้ rgb(220, 20, 60))

ตัวเลขน้ำหนักที่ dev ใช้คุยกันจริง

เวลาคุยงานจริง คนจะเขียนน้ำหนักเป็นตัวเลขสามช่อง (id, class, tag) แบบนี้:

วิธีเทียบคือ ดูช่องซ้ายสุดก่อน ใครมากกว่าชนะทันที ไม่ต้องดูช่องขวาเลย ถ้าเท่ากันค่อยขยับไปดูช่องถัดไป

<style>
  .mark { color: green; }
  body div p { color: red; }
</style>

<div>
  <p>ผมโดน body div p</p>
  <p class="mark">ผมมี class ชื่อ mark</p>
</div>

5 · ทายก่อนเฉลย — สีอะไรออกมา

ตอนนี้คุณรู้กติกาครบแล้ว ลองใช้กับโจทย์ที่มีกับดักสองชั้นซ้อนกัน

<style>
  .pill { color: red; }
  p     { color: blue; }
  .pill { color: green; }
</style>

<p class="pill">ผมสีอะไร?</p>

โค้ดชุดเดียวกันเป๊ะ เรนเดอร์จริงให้ดูอีกที:

<style>
  .pill { color: red; }
  p     { color: blue; }
  .pill { color: green; }
</style>

<p class="pill">ผมสีอะไร?</p>

6 · แล้วทำไมถึงบอกว่า "อย่าใช้ id จัดสไตล์"

พออ่านหัวข้อ 4 จบ หลายคนจะสรุปผิดทันทีว่า "งั้นใช้ id ตลอดเลยสิ จะได้ชนะทุกอย่าง ไม่ต้องมานั่งงง"
นี่คือกับดักที่ทำให้โปรเจกต์จริงพังช้า ๆ และเป็นเหตุผลที่ทีมส่วนใหญ่มีกติกาว่า จัดสไตล์ด้วย class เป็นหลัก · ใช้ id เพื่อ "ชี้ตำแหน่ง" เท่านั้น

เหตุผลมีสามข้อ และข้อที่ 1 คือข้อที่เจ็บที่สุด:

ข้อ 1 — ชนะแรงเกินไป จนวันหลังแก้ไม่ได้

สมมติวันนี้คุณเขียนราคาสินค้าไว้แบบนี้ แล้ววันหลังทีมขอให้ "ราคาที่ลดแล้วเป็นสีแดง":

#price { color: gray; }
.sale-price { color: red; }

.price { color: gray; }
.sale-price { color: red; }

ข้อ 2 — id ใช้ซ้ำไม่ได้ แต่หน้าตาต้องใช้ซ้ำเสมอ

ในหน้าหนึ่ง id ชื่อหนึ่ง ๆ มีได้ตัวเดียว
แต่สิ่งที่คุณอยากจัดสไตล์แทบทั้งหมด — ปุ่ม การ์ด ป้ายสถานะ หัวข้อ section — มีมากกว่าหนึ่งอันเสมอ หรือถ้าวันนี้มีอันเดียว พรุ่งนี้ก็จะมีอันที่สอง
พอถึงวันนั้น กฎที่เขียนด้วย id จะ copy ไปใช้ต่อไม่ได้เลย ต้องนั่ง copy ทั้งบล็อกแล้วเปลี่ยนชื่อ id ซึ่งแปลว่าถ้าจะแก้สีปุ่ม ต้องไล่แก้ทุกที่ที่ copy ไป
ส่วน class ตัวเดียวแปะได้ไม่จำกัด — ตรงกับที่สไลด์หน้า 33 เขียนไว้เป๊ะว่า class คือ "a reusable label"

ข้อ 3 — id มีงานประจำของมันอยู่แล้ว

id ไม่ได้ถูกออกแบบมาเพื่อจัดสไตล์ตั้งแต่แรก มันคือที่อยู่ของ element และมีคนใช้อยู่สามกลุ่ม:

• ลิงก์กระโดดในหน้า — <a href="#about-me"> จะพาไปที่ element ที่ id ตรงกัน · เว็บบทเรียนที่คุณอ่านอยู่นี้ก็ใช้ท่านี้ทำเมนู "ในบทนี้"
• ฟอร์ม — <label for="email"> หา <input id="email"> ด้วย id (คุณเพิ่งเจอมาในบท 58) · ถ้า id ซ้ำ การกดที่ label แล้วเคอร์เซอร์ไปลงผิดช่องคือเรื่องปกติ
• JavaScript — document.getElementById('about-me') คือทางที่เร็วและตรงที่สุดในการหยิบ element

ถ้าคุณเอา id ไปผูกกับหน้าตาด้วย วันที่อยากเปลี่ยนหน้าตาคุณจะไม่กล้าเปลี่ยนชื่อ id เพราะไม่รู้ว่ามีลิงก์หรือ JS ตัวไหนอ้างอยู่บ้าง — ของสองอย่างที่เปลี่ยนคนละจังหวะกัน ไม่ควรผูกไว้ด้วยชื่อเดียวกัน

7 · สรุป — เจอสถานการณ์ไหน หยิบอันไหน

8 · ทดสอบความเข้าใจ

9 · ภารกิจ

อ้างอิง

• MDN — CSS selectors — อ่านแค่หัวข้อ Basic selectors ก็พอสำหรับบทนี้ จะเห็นสามแบบที่เราเพิ่งเรียน (type · class · id) เรียงอยู่สามบรรทัดแรก ส่วนที่เหลือของหน้าคือของที่จะทยอยเจอในบทหลัง ๆ ยังไม่ต้องอ่านตอนนี้
• MDN — Specificity — อ่านตาราง Selector weight categories อันเดียว มันคือที่มาของตัวเลขสามช่อง (id, class, tag) ในหัวข้อ 4 · ถ้าเลื่อนลงต่อจะเจอหัวข้อ Three-column comparison ซึ่งอธิบายวิธีเทียบจากซ้ายไปขวาแบบเดียวกับที่บทนี้สอน
• MDN — Cascade — อ่านหัวข้อ Order of precedence เพื่อเห็นภาพว่า specificity เป็นแค่ขั้นตอนหนึ่ง และ source order มาทีหลังจริง ๆ ตามที่บทนี้บอก · จะได้เห็นด้วยว่า !important ไปแทรกอยู่ตรงไหนของลำดับ
• W3C Selectors Level 4 — §17 Calculating a selector's specificity — ตัวสเปกจริงที่ MDN อ้างอิงอีกที · อ่านแค่ย่อหน้าแรกที่ขึ้นต้นว่า "A selector's specificity is calculated..." จะเห็นคำว่า A, B, C ซึ่งก็คือสามช่องที่บทนี้เรียกว่า (id, class, tag) นั่นเอง — เอาไว้ยืนยันว่าที่เรียนมาไม่ใช่กฎที่ใครคิดเอง
• MDN — the id attribute — อ่านสองย่อหน้าแรก จะเจอประโยคที่บอกว่าค่าของ id ต้องไม่ซ้ำกันในทั้งเอกสาร และเห็นรายการงานจริงของมัน (ลิงก์ในหน้า · label · JavaScript) ซึ่งเป็นเหตุผลข้อ 3 ในหัวข้อ 6