CSS Specificity: ความเฉพาะเจาะจงของ Selectors

CSS Specificity ไม่ใช่แค่ tongue twister (ลองพูด 3 ครั้งดู!) แต่ยังเป็น mind bender อีกด้วย เป็นหนึ่งใน concepts ที่ยากที่สุดใน CSS ในบทความนี้จะครอบคลุมว่า specificity หมายถึงอะไร คำนวณยังไง และ ranking ของ selectors กำหนด style ที่ render บนหน้าได้อย่างไร อย่ากลัว! คุณจะกลายเป็น specificity expert ไว้ๆ

'Specificity' หมายถึงอะไร?

CSS specificity อ้างถึงว่า selector สำคัญแค่ไหน แต่ละ selector มี specificity ตาม type ค่าเลข越高 = เฉพาะเจาะจงมาก = โอกาสชนะ styling wars มากขึ้น

Specificity แสดงด้วย 4 ตัวเลข คั่นด้วย comma:

Selector specificity = 0, 0, 0, 0

ดูเป็น string 4 ตัวเลขไม่มี comma (0000, 0101, 1001) ค่า越高 = เฉพาะเจาะจงมาก

Selectors' specificity โดย rank (ต่ำ – สูง):

เดินผ่าน element types ตาม rank:

• Universal selector (*) Specificity = 0, 0, 0, 0 มักอยู่บน stylesheets ต่ำสุด rank ด้านความสำคัญ อะไรก็ override หรือเพิ่มได้
• Combinators (>, +, ~, ' ', ) และ negation pseudo classes (:not) ไม่มีผลต่อ specificity ไม่นับรวมใน overall number
• Type selectors: div, form, ul, li เป็นต้น ครอบคลุมทุกอย่างที่เป็น tag ใน HTML Specificity weight = 0, 0, 0, 1 ถ้ามี multiple type selectors คั่นด้วย combinator จะบวกกัน:

  div li {} ⇐ specificity 0,0,0,2
  div li p {} ⇐ specificity 0,0,0,3

• Class, attribute, pseudo-class selectors: .main-container, .navbar, [type="text"], :hover Specificity = 0, 0, 1, 0

  div.navlink a {} ⇐ specificity 0, 0, 1, 1 (1 class + 1 type)
  div.header li.list-item-disc button[type="submit"] {} ⇐ specificity 0, 0, 3, 3 (3 type + 2 class + 1 attribute)
  ถ้าหยิบ attribute selector ออก specificity = 0, 0, 2, 3 23 < 33 ดังนั้น 0,0,3,3 จะชนะ

• ID selectors: #blue, #hidden Specificity สูงสุดใน CSS selectors: 1, 0, 0, 0 เนื่องจาก ID attribute เป็น unique มัก style element เฉพาะเจาะจง

  div#orange {} ⇐ specificity 1, 0, 0, 1 (1 type + 1 ID)
  style ไหนชนะ?
  div#orange { background-color: orange; }
  div.square { background-color: green; width: 150px; height: 150px; }
  1. div แรก: type + ID = 1,0,0,1
  2. div ที่สอง: type + class = 0,0,1,1
  1001 > 11 div แรกชนะ background สีส้ม ขัดกับ cascading nature ของ CSS

• Inline-style: specific กว่า ID selectors trump ทุกอย่างใน CSS file weighted สูงสุด
• !important rule: trump ทุกอย่าง specific มากที่สุด overwrite rules ทั้งหมด

Practice

ใน code editor ด้านล่าง สร้างหน้าตัวอย่าง containers พร้อม class names และ ID names แล้ว ลอง practice CSS skills เปลี่ยนสี elements เฉพาะตัว ในขณะที่ divs อื่นๆ คงสีเดิม จะเขียน rules ยังไง? จะใช้อะไรได้ highest specificity?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Specificity</title> <style> body { width: 100%; max-width: 800px; margin: 0 auto; } main { width: 100%; height: 800px; display: flex; flex-wrap: wrap; flex-direction: column; } div { text-align: center; } *.square { height: 150px; width: 150px; background-color: black; color: white; margin: 20px; } div.flex { display: flex; justify-content: center; align-items: center; } div#red { background-color: darkred; } #red { background-color: red; } main > div { font-size: 55px; font-weight: bold; } div#self-align { align-self: center; } </style> </head> <body> <main> <div id="self-align" class="square flex">1</div> <div class="square flex">2</div> <div class="square flex">3</div> <div class="square flex">4</div> <div class="square flex">5</div> <div id="red" class="square flex">6</div> <div class="square flex">7</div> <div class="square flex">8</div> <div class="square flex">9</div> <div class="square flex">10</div> <div class="square flex">11</div> <div class="square flex">12</div> </main> </body> </html>

สรุป

บทความนี้อภิปราย CSS Specificity – selectors ไหน specific กว่า และคำนวณ specificity number ยังไง อย่าผิดหวังถ้าไม่เข้าใจทันทีครั้งแรก อ่านซ้ำๆ จะเข้าใจเร็วพอ!