CSS Specificity

📌 CSS Specificity (اختصاصی بودن در CSS) — ترجمه و توضیح کامل

CSS Specificity یا ویژگی/اولویت در CSS، قانونی است که مشخص می‌کند وقتی چندین قانون (rule) روی یک عنصر HTML اعمال می‌شوند، **کدام قانون اولویت دارد** و اجرا می‌شود.

—

🔷 ترتیب اولویت در CSS (از کم به زیاد)

| سطح | نوع انتخابگر (Selector) | مثال | امتیاز |
| — | ———————– | ———————— | ——————— |
| 1️⃣ | انتخابگرهای عمومی (Universal) | `*`, `div`, `p` | **0-0-1** |
| 2️⃣ | انتخابگرهای کلاس، ویژگی و شبه‌کلاس | `.class`, `[type=”text”]`, `:hover` | **0-1-0** |
| 3️⃣ | انتخابگرهای ID | `#id` | * *1-0-0** |
| 4️⃣ | استایل‌های درون تگ (inline styles) | `style=”color:red”` | **1-0-0-0** (بالاتر از همه موارد بالا) |
| 5️⃣ | !important | `color: red !important` | بیشترین قدرت (فوق قوانین بالا) |

—

🧠 فرمول محاسبه Specificity

Specificity با فرمت:
`a-b-c`

* **a** = تعداد انتخابگرهای ID
* **b** = تعداد کلاس‌ها، ویژگی‌ها، و شبه‌کلاس‌ها
* **c** = تعداد تگ‌ها و شبه‌عناصر

مثال:

“`css
/* امتیاز: 0-1-1 */
ul li.active {
color: red;
}

/* امتیاز: 1-0-0 */
#main {
color: blue;
}
“`

در این مثال، `#main` برنده است چون امتیاز بیشتری دارد.

—

## ⚠️ !important چیست؟

“`css
p {
color: red !important;
}
“`

این دستور باعث می‌شود که این قانون همیشه اجرا شود، حتی اگر قوانین دیگر دارای specificity بالاتری باشند.
اما **استفاده زیاد از !important توصیه نمی‌شود چون کنترل کد را سخت می‌کند.

—

🎯 مثال واقعی

“`html
<p id=“text” class=“highlight”>Hello</p>
“`

“`css
p { color: black; } /* 0-0-1 */
.highlight { color: green; } /* 0-1-0 */
#text { color: blue; } /* 1-0-0 */
“`