CSS Specificity (Độ Cụ Thể) – Hướng Dẫn Chi Tiết

Khái niệm CSS Specificity không chỉ là "rào cản" phát âm (thử nói 3 lần nhanh!), mà còn khá "gây đau đầu"! Đây là một trong những khái niệm khó nắm nhất trong CSS. Bài này cover: ý nghĩa specificity, cách tính, và cách ranking selector quyết định style render ra trang. Đừng lo, bạn sẽ thành expert specificity ngay!

Specificity Nghĩa Là Gì?

CSS specificity về cơ bản chỉ mức độ quan trọng của một selector. Mỗi selector được gán specificity tùy theo loại. Số càng cao → càng cụ thể → block CSS đó càng có khả năng "thắng" trong cuộc chiến styling.

Specificity biểu diễn bằng 4 số, cách nhau bởi dấu phẩy:

Selector specificity = 0, 0, 0, 0

Khi xem specificity như chuỗi 4 số không dấu phẩy (0000, 0101, 1001...), số lớn hơn = cụ thể hơn.

Ranking Selector Theo Specificity (Thấp → Cao):

Duyệt qua các loại element theo rank:

Universal selector (*): Specificity 0,0,0,0. Thường ở đầu stylesheet. Rank thấp nhất. Gần như bất cứ gì cũng override hoặc thêm vào nó.
Combinators (+, >, ~, space) và negation pseudo-class (:not): Không ảnh hưởng specificity, không cộng vào tổng.
Type selectors (div, form, ul, li...): Bao gồm mọi tag HTML. Weight = 0,0,0,1. Nhiều type selector nối nhau bằng combinator → cộng dồn:
```
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 {} ⇐ 0,0,1,1 (1 class + 1 type)
div.header li.list-item-disc button[type="submit"] {} ⇐ 0,0,3,3 (3 type + 2 class + 1 attribute)
    Nếu bỏ attribute selector → 0,0,2,3. Vì 23 < 33, selector 0,0,3,3 thắng.

ID selectors (#blue, #hidden...): Specificity cao nhất trong CSS selectors: 1,0,0,0. Do ID unique, thường style element rất cụ thể.
```
div#orange {} ⇐ 1,0,0,1 (1 type + 1 ID)
```
So sánh:
```
div#orange { background-color: orange; }
div.square { background-color: green; width: 150px; height: 150px; }
```
1. div#orange: type + ID = 1,0,0,1
2. div.square: type + class = 0,0,1,1
1001 > 11 → div#orange thắng, background orange (ngược với cascading nature của CSS).
Inline-style: Cụ thể hơn ID selector. Trump hầu như mọi thứ trong CSS file. Weight cao nhất.
Rule !important: Trump mọi thứ. Cụ thể nhất, ghi đè mọi rule CSS trước đó.

Thực Hành

Trong code editor dưới, có trang sample containers với class/ID ngẫu nhiên. Hãy practice dùng CSS skill đổi màu element cụ thể trong khi các div khác giữ nguyên màu. Viết rule như thế nào? Dùng gì để có specificity cao nhất nếu cần target element cụ thể?

<!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 id="red" class="square flex">6</div> 
      ... 
    </main> 
  </body> 
</html>

Kết Luận

Bài này thảo luận CSS Specificity: selector nào cụ thể hơn, cách tính specificity number. Đừng nản nếu không hiểu ngay lần đầu – lượng info lớn. Kiên trì và bạn sẽ nắm vững!