تابز مدیا | آموزش قدم به قدم برنامه نویسی

CSS Specificity (اختصاصی بودن سلکتورها)

🔹 Specificity یعنی چی؟

وقتی چند قانون CSS برای یک المنت تعریف بشن، مرورگر باید تصمیم بگیره کدوم قانون رو اعمال کنه.
اینجا Specificity (اولویت‌بندی سلکتورها) وارد عمل می‌شه.

🔹 ترتیب اولویت در CSS

مرورگر به ترتیب زیر تصمیم می‌گیره:

!important (بالاترین اولویت)
Inline Styles (استایل نوشته‌شده مستقیم روی تگ HTML با style="")
ID Selector (مثل #header)
Class, Attribute, Pseudo-class (مثل .menu, [type="text"], :hover)
Element, Pseudo-element (مثل div, h1, ::before)
ترتیب نوشتن → اگر همه‌چیز مساوی باشه، قانون آخری که نوشته شده اعمال می‌شه.

🔹 سیستم امتیازدهی Specificity

می‌تونیم Specificity رو مثل امتیاز حساب کنیم:

Inline style → امتیاز: 1000
ID selector → امتیاز: 100
Class / Attribute / Pseudo-class → امتیاز: 10
Element / Pseudo-element → امتیاز: 1

🔹 مثال‌ها

مثال ۱: کدوم رنگ اعمال میشه؟


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <style>
    p { color: blue; }         /* امتیاز = 1 */
    .text { color: green; }    /* امتیاز = 10 */
    #para { color: red; }      /* امتیاز = 100 */
  </style>
</head>
<body>
  <p id="para" class="text">سلام دنیا</p>
</body>
</html>

🔹 نتیجه → متن قرمز میشه (چون #para امتیاز بیشتری داره).

مثال ۲: inline style vs CSS


<p id="para" class="text" style="color: purple;">سلام</p>

🔹 نتیجه → متن بنفش میشه (چون inline style امتیاز 1000 داره).

مثال ۳: !important


<style>
  p { color: blue !important; }
  #para { color: red; }
</style>

<p id="para">سلام</p>

🔹 نتیجه → متن آبی میشه (چون !important حتی از ID هم قوی‌تره).

🔹 نکته حرفه‌ای

استفاده زیاد از !important باعث کدهای نامرتب میشه ❌
بهترین کار اینه که ساختار انتخابگرها رو درست طراحی کنیم.