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

important!

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

📌 سینتکس


selector {
  property: value !important;
}

🔹 مثال ساده


html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>!important Exampletitle>
  <style>
    p {
      color: blue;
    }

    .highlight {
      color: red !important; /* این اولویت بیشتری داره */
    }
  style>
head>
<body>
  <p class="highlight">این متن همیشه قرمز است.p>
body>
html>

🔎 در اینجا، حتی اگر استایل پیش‌فرض p { color: blue } باشه، متن قرمز نمایش داده میشه چون !important استفاده شده.

🔹 اولویت در CSS (بدون !important)

استایل اینلاین (داخل تگ HTML)
کلاس‌ها و آی‌دی‌ها
استایل‌های عمومی (تگ‌ها مثل p, div, h1 و …)

ولی وقتی !important بیاد، از همه بالاتر میره.

⚠️ نکته مهم

استفاده زیاد از !important بدترین عادت در CSS محسوب میشه 🚫
چون باعث میشه نگهداری کد سخت بشه و دیگه نتونی به راحتی استایل‌ها رو تغییر بدی.
فقط در شرایط خاص استفاده کن (مثل override کردن استایل‌های کتابخونه‌هایی مثل Bootstrap یا Tailwind).

🔹 مثال واقعی با Bootstrap

گاهی Bootstrap روی دکمه‌ها استایل پیش‌فرض میذاره. اگر بخوای حتماً تغییر کنه:


.btn {
  background-color: green !important;
}