!important در CSS (CSS !important)
قانون «!important» در CSS به یک ویژگی اولویت بالاتر می دهد تا بر تمام قوانین قبلی همان ویژگی روی همان عنصر غلبه کند. بااین حال، استفاده زیاد از !important دیباگ را سخت می کند؛ پس سنجیده به کار ببرید.
قانون !important چیست؟
کلیدواژه «!important» در انتهای اعلان و پیش از سمی کالن می آید و برای همان ویژگی، همه قوانین قبلی را بی اثر می کند؛ حتی اگر آن قوانین اختصاصیت (Specificity) بالاتری داشته باشند.
سینتکس
selector { property: value !important; }نکته: برای مرور سلسله مراتب وزن انتخاب گرها به بخش اختصاصیت CSS سر بزنید.
مثال قانون !important
در مثال زیر، همه پاراگراف ها پس زمینه زرد می گیرند. زیرا قانون !important بر سبک های درون خطی، شناسه و کلاس برای همان ویژگی می چربد.
p { background-color: yellow !important; }
#myid { background-color: blue; }
.myclass { background-color: gray; }
/* <p style=\"background-color:orange;\">…</p> هم زرد می شود */با احتیاط از !important استفاده کنید
تنها راهِ غلبه بر یک قانون !important، تعریف قانونی با !important و اختصاصیت برابر یا بیشتر است. این رویکرد کد را مبهم می کند و نگه داری را دشوار.
p { background-color: red !important; }
#myid { background-color: blue !important; }
.myclass { background-color: gray !important; }هشدار: انباشت !important در فایل های بزرگ باعث تضادهای پنهان و زمان دیباگ طولانی می شود.
موارد استفاده منصفانه !important
1) بازنویسی سبک های غیرقابل ویرایش
اگر در یک CMS به CSS اصلی دسترسی ندارید، می توانید برای چند ویژگی کلیدی از !important استفاده کنید.
2) احترام به تنظیمات دسترسی کاربر
برای کاربرانی که «کاهش حرکت» را فعال کرده اند، انیمیشن و ترنزیشن را خاموش کنید.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}نکته: درباره رسانه ها بعداً در واحدها و مباحث مرتبط بیشتر می خوانید.
3) ثابت نگه داشتن ظاهر یک مؤلفه خاص
برای یک دکمه پیوند، اگر قوانین والد با اختصاصیت بالاتر تداخل ایجاد کردند، می توانید ویژگی های کلیدی را قفل کنید.
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}برای درک بهتر اینکه چرا !important برنده می شود، صفحه اختصاصیت CSS را مرور کنید. همچنین رفرنس های خارجی: قانون !important در اختصاصیت و تعریف !important.