وثائق CSS قابلة للتشغيل: !important في CSS

Q: كيف أتجاوز !important؟

بتصريح !important آخر خصوصيته أعلى، أو بالخصوصية نفسها وموقع لاحق في ملف الأنماط. السمة style المضمّنة مع !important تتغلب على كل !important في ملفات الأنماط.

Q: هل تتغلب !important على الأنماط المضمّنة؟

نعم. تصريح في ملف الأنماط مع !important يتغلب على تصريح عادي في السمة style. لكنه لا يتغلب على تصريح مضمّن موسوم هو نفسه بـ !important.

ماذا تفعل !important

إضافة !important بعد القيمة تجعل ذلك التصريح يفوز على كل تصريح عادي للخاصية نفسها على العنصر نفسه. لا تعود خصوصية المحدد ولا ترتيب المصدر مهمة.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

من دون !important كان محدد المعرّف سيفوز وكان النص سيصبح أزرق. احذف !important في المحرر لترى ذلك.

الصيغة

selector {
  property: value !important;
}

تأتي بعد القيمة وقبل الفاصلة المنقوطة. تنطبق على ذلك التصريح وحده، لا على القاعدة كلها. وتعمل أيضًا في الخصائص المختصرة (margin: 0 !important; تجعل الجوانب الأربعة كلها مهمة) وفي السمة style.

ما الذي يتغلب على ماذا

للأنماط التي يكتبها مؤلف الصفحة، من الأضعف إلى الأقوى:

الرتبة	التصريح	مثال
1	تصريح عادي في ملف الأنماط	`p { color: blue; }`
2	تصريح عادي في السمة `style`	`<p style="color: blue">`
3	`!important` في ملف الأنماط	`p { color: blue !important; }`
4	`!important` في السمة `style`	`<p style="color: blue !important">`

داخل الرتبة الواحدة تحسم الخصوصية، ثم ترتيب ظهور التصريحات: اللاحق يفوز.

هذا هو الاستخدام اليومي المشروع الوحيد لـ !important: تجاوز نمط مضمّن لا تستطيع تعديله، مثل نمط يكتبه عنصر واجهة من طرف ثالث.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

حين يكون التصريحان كلاهما !important

!important في مواجهة !important تعود إلى القواعد المعتادة: الخصوصية الأعلى تفوز، وعند التعادل يفوز التصريح اللاحق.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

هكذا تتصاعد !important: بمجرد أن تستخدمها قاعدة، يجب أن تستخدمها القاعدة التي عليها تجاوزها أيضًا، فتبدأ الخصوصية بالارتفاع من جديد.

خصوصية CSS في جدول واحد

الخصوصية هي وزن المحدد. عدّ ثلاثة أرقام:

العمود	ما الذي يُعد	مثال محدد	الخصوصية
A	محددات المعرّف ID	`#nav`	(1,0,0)
B	الفئات، السمات، الفئات الزائفة	`.btn`، `[type="text"]`، `:hover`	(0,1,0) لكل واحد
C	محددات النوع، العناصر الزائفة	`p`، `::before`	(0,0,1) لكل واحد
لا شيء	`*`، والمُركِّبات (`>`، `+`، `~`، المسافة)	`*`، `ul > li`	لا تضيف شيئًا

قارن العمود A أولًا؛ وعند التعادل فقط انظر إلى B ثم C. لذلك يتغلب #nav a (1,0,1) على .menu .item .link a (0,3,1): معرّف واحد يرجح على أي عدد من الفئات.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

فهم هذا الجدول هو ما يتيح لك تجنب !important: معظم مشكلات «CSS لا تنطبق» سببها قاعدة أكثر خصوصية في مكان آخر، تراها في لوحة Styles في DevTools وتصريحك مشطوب.

بدائل أنظف

طابِق الخصوصية ثم اعتمد على الترتيب. حمّل ملف أنماطك بعد ملف المكتبة واستخدم محددًا بالخصوصية نفسها على الأقل.
اخفض خصوصية القاعدة الأخرى باستخدام :where(). كل ما داخل :where() خصوصيته صفر، فالأنماط الأساسية المكتوبة بها سهلة التجاوز.
استخدم متغير CSS كنقطة تحكم. المكوّن الذي يقرأ var(--btn-bg) يمكن تغيير سمته من دون صراع مع محدداته. راجع متغيرات CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

ضبط !important من JavaScript

لا يعمل element.style.color = 'red !important': القيمة غير صالحة فتُتجاهل. استخدم setProperty مع وسيط ثالث:

el.style.setProperty('color', '#f59e0b', 'important');

أخطاء شائعة

وضعها في المكان الخطأ. color: !important red; غير صالحة؛ مكانها بعد القيمة.
استخدامها في @keyframes. التصريحات الموسومة بـ !important داخل الإطارات المفتاحية تُتجاهل.
حل كل تعارض بها. ابحث عن القاعدة الفائزة في DevTools وطابِق خصوصيتها أو اخفضها بدلًا من ذلك.
توقع أن تؤثر على خاصية أخرى. color: red !important لا تفعل شيئًا لـ background.
نسيان أن !important المضمّنة تتغلب على قاعدتك. لا توجد قاعدة في ملفات أنماط الصفحة تستطيع تجاوز style="color: red !important"؛ غيّر السمة نفسها، مثلًا عبر JavaScript.

الأسئلة الشائعة

ماذا تفعل !important في CSS؟

تمنح تصريحًا واحدًا الأولوية على كل تصريح عادي للخاصية نفسها على العنصر نفسه، بغض النظر عن خصوصية المحدد أو الترتيب. اكتبها بعد القيمة: color: red !important;.

كيف أتجاوز !important؟

بتصريح !important آخر خصوصيته أعلى، أو بالخصوصية نفسها وموقع لاحق في ملف الأنماط. السمة style المضمّنة مع !important تتغلب على كل !important في ملفات الأنماط.

هل تتغلب !important على الأنماط المضمّنة؟

نعم. تصريح في ملف الأنماط مع !important يتغلب على تصريح عادي في السمة style. لكنه لا يتغلب على تصريح مضمّن موسوم هو نفسه بـ !important.

هل استخدام !important ممارسة سيئة؟

إن استُخدمت لحسم معركة خصوصية، نعم: فالتجاوز التالي سيحتاج إلى !important أيضًا، ويصبح تغيير ملف الأنماط صعبًا. لكنها معقولة في فئات الأدوات التي يجب أن تنطبق دائمًا (مثل .hidden)، ولتجاوز أنماط مضمّنة من طرف ثالث، وفي ملفات أنماط المستخدم.

كيف تُحسب خصوصية CSS؟

عدّ ثلاثة أعمدة: محددات المعرّف ID، ثم الفئات والسمات والفئات الزائفة، ثم محددات النوع والعناصر الزائفة. قارن عمودًا عمودًا من البداية، فيتغلب #nav a (1,0,1) على .menu .item a (0,2,1). المحدد العام * والمُركِّبات لا تضيف شيئًا.

مفاهيم ذات صلة