תיעוד CSS עם דוגמאות להרצה: !important

Q: איך דורסים !important?

עם הצהרת !important אחרת שיש לה ספציפיות גבוהה יותר, או אותה ספציפיות ומיקום מאוחר יותר בגיליון הסגנונות. style inline עם !important מנצח כל !important בגיליון סגנונות.

Q: האם !important דורס סגנונות inline?

כן. הצהרה בגיליון סגנונות עם !important מנצחת הצהרה רגילה במאפיין style. היא לא מנצחת הצהרת inline שמסומנת בעצמה !important.

CSS !important: איך זה עובד ומתי להשתמש בו

!important גורם להצהרה לנצח הצהרות רגילות, בלי קשר לספציפיות שלהן. למדו בדיוק את מי הוא מנצח, מי מנצח אותו, איך ספציפיות עובדת מתחת לפני השטח, ומהן הדרכים הנקיות יותר לנצח בהתנגשות סגנונות.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

מה !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, סלקטור ה-ID היה מנצח והטקסט היה כחול. מחקו את !important בעורך כדי לראות את זה.

תחביר

selector {
  property: value !important;
}

הוא בא אחרי הערך ולפני הנקודה-פסיק. הוא חל רק על ההצהרה האחת הזאת, לא על כל הכלל. הוא עובד גם בקיצורים (margin: 0 !important; הופך את כל ארבעת הצדדים ל-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: דריסה של סגנון inline שאי אפשר לערוך, כמו סגנון שכתב וידג'ט של צד שלישי.

<!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): ID אחד שוקל יותר מכל מספר של מחלקות.

<!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 בתוך keyframes נזנחות.
לתקן בעזרתו כל התנגשות. מצאו ב-DevTools את הכלל המנצח והשוו את הספציפיות שלו או הורידו אותה.
לצפות שישפיע על מאפיין אחר. color: red !important לא עושה כלום ל-background.
לשכוח ש-!important ב-inline מנצח את שלכם. שום כלל בגיליונות הסגנונות של הדף לא יכול לדרוס style="color: red !important"; שנו את המאפיין עצמו, למשל עם JavaScript.

שאלות נפוצות

מה !important עושה ב-CSS?

הוא נותן להצהרה אחת עדיפות על כל ההצהרות הרגילות לאותו מאפיין באותו אלמנט, בלי קשר לספציפיות של הסלקטור או לסדר. כתבו אותו אחרי הערך: color: red !important;.

איך דורסים !important?

עם הצהרת !important אחרת שיש לה ספציפיות גבוהה יותר, או אותה ספציפיות ומיקום מאוחר יותר בגיליון הסגנונות. style inline עם !important מנצח כל !important בגיליון סגנונות.

האם !important דורס סגנונות inline?

כן. הצהרה בגיליון סגנונות עם !important מנצחת הצהרה רגילה במאפיין style. היא לא מנצחת הצהרת inline שמסומנת בעצמה !important.

האם שימוש ב-!important הוא הרגל רע?

כשמשתמשים בו כדי לנצח במאבק ספציפיות, כן: הדריסה הבאה תצטרך גם היא !important, וקשה יהיה לשנות את גיליון הסגנונות. הוא סביר במחלקות עזר שחייבות לחול תמיד (כמו .hidden), בדריסת סגנונות inline של צד שלישי ובגיליונות סגנונות של משתמשים.

איך מחשבים ספציפיות ב-CSS?

סופרים שלוש עמודות: סלקטורי ID, אחר כך מחלקות, מאפיינים ופסאודו-קלאסים, ואחר כך סלקטורי סוג ופסאודו-אלמנטים. משווים עמודה אחרי עמודה מההתחלה, ולכן #nav a (1,0,1) מנצח את .menu .item a (0,2,1). הסלקטור האוניברסלי * והמחברים לא מוסיפים כלום.

מושגים קשורים