Dokumentacja CSS z przykładami: !important

Q: Jak nadpisać !important?

Inną deklaracją !important, która ma wyższą specyficzność albo taką samą specyficzność i późniejsze miejsce w arkuszu stylów. Atrybut style z !important pokonuje każde !important z arkusza stylów.

Q: Czy !important nadpisuje style inline?

Tak. Deklaracja z arkusza stylów oznaczona !important pokonuje zwykłą deklarację w atrybucie style. Nie pokonuje deklaracji inline, która sama jest oznaczona !important.

Co robi !important

Dodanie !important po wartości sprawia, że ta deklaracja wygrywa z każdą zwykłą deklaracją tej samej właściwości na tym samym elemencie. Specyficzność selektora i kolejność w kodzie przestają mieć znaczenie.

<!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>

Bez !important wygrałby selektor ID i tekst byłby niebieski. Usuń !important w edytorze, żeby to zobaczyć.

Składnia

selector {
  property: value !important;
}

Pisze się go po wartości, a przed średnikiem. Dotyczy tylko tej jednej deklaracji, a nie całej reguły. Działa też we właściwościach skróconych (margin: 0 !important; sprawia, że wszystkie cztery strony są important) i w atrybucie style.

Co wygrywa z czym

Dla stylów napisanych przez autora strony, od najsłabszego do najsilniejszego:

Pozycja	Deklaracja	Przykład
1	Zwykła deklaracja w arkuszu stylów	`p { color: blue; }`
2	Zwykła deklaracja w atrybucie `style`	`<p style="color: blue">`
3	`!important` w arkuszu stylów	`p { color: blue !important; }`
4	`!important` w atrybucie `style`	`<p style="color: blue !important">`

W obrębie jednej pozycji decyduje specyficzność, a potem kolejność deklaracji: wygrywa późniejsza.

To jedyne uzasadnione codzienne zastosowanie !important: nadpisanie stylu inline, którego nie możesz edytować, na przykład wstawionego przez widżet z zewnętrznej biblioteki.

<!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>

Gdy obie deklaracje mają !important

!important przeciwko !important wraca do zwykłych zasad: wygrywa wyższa specyficzność, a przy remisie późniejsza deklaracja.

<!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>

Tak właśnie eskaluje !important: gdy jedna reguła go użyje, reguła, która musi ją nadpisać, też musi go użyć, a specyficzność znów zaczyna rosnąć.

Specyficzność CSS w jednej tabeli

Specyficzność to waga selektora. Policz trzy liczby:

Kolumna	Co się liczy	Przykładowy selektor	Specyficzność
A	Selektory ID	`#nav`	(1,0,0)
B	Klasy, atrybuty, pseudoklasy	`.btn`, `[type="text"]`, `:hover`	(0,1,0) każdy
C	Selektory typu, pseudoelementy	`p`, `::before`	(0,0,1) każdy
brak	`*`, kombinatory (`>`, `+`, `~`, spacja)	`*`, `ul > li`	nic nie dodają

Najpierw porównaj kolumnę A; dopiero przy remisie patrz na B, potem na C. Dlatego #nav a (1,0,1) pokonuje .menu .item .link a (0,3,1): jeden ID waży więcej niż dowolna liczba klas.

<!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>

Zrozumienie tej tabeli pozwala unikać !important: większość problemów typu "mój CSS nie działa" to bardziej specyficzna reguła gdzie indziej, widoczna w panelu Styles w DevTools, gdzie twoja deklaracja jest przekreślona.

Czystsze alternatywy

Dorównaj specyficzności i polegaj na kolejności. Wczytaj swój arkusz stylów po arkuszu biblioteki i użyj selektora co najmniej tak samo specyficznego.
Obniż specyficzność drugiej reguły przez :where(). Wszystko wewnątrz :where() liczy się jako zero, więc style bazowe napisane w ten sposób łatwo nadpisać.
Użyj zmiennej CSS jako punktu zaczepienia. Komponent, który odczytuje var(--btn-bg), można dostosować bez walki z jego selektorami. Zobacz zmienne 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>

Ustawianie !important z JavaScriptu

element.style.color = 'red !important' nie działa: wartość jest nieprawidłowa i zostaje zignorowana. Użyj setProperty z trzecim argumentem:

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

Częste błędy

Umieszczanie go w złym miejscu. color: !important red; jest nieprawidłowe; pisze się go po wartości.
Używanie go w @keyframes. Deklaracje oznaczone !important wewnątrz klatek kluczowych są ignorowane.
Rozwiązywanie nim każdego konfliktu. Znajdź zwycięską regułę w DevTools i zamiast tego dorównaj jej specyficzności albo ją obniż.
Oczekiwanie, że wpłynie na inną właściwość. color: red !important nic nie robi z background.
Zapominanie, że !important inline pokonuje twoje. Żadna reguła w arkuszach stylów strony nie nadpisze style="color: red !important"; zmień sam atrybut, na przykład JavaScriptem.

Najczęściej zadawane pytania

Co robi !important w CSS?

Daje jednej deklaracji pierwszeństwo przed każdą zwykłą deklaracją tej samej właściwości na tym samym elemencie, bez względu na specyficzność selektora czy kolejność. Pisze się go po wartości: color: red !important;.

Jak nadpisać !important?

Inną deklaracją !important, która ma wyższą specyficzność albo taką samą specyficzność i późniejsze miejsce w arkuszu stylów. Atrybut style z !important pokonuje każde !important z arkusza stylów.

Czy !important nadpisuje style inline?

Tak. Deklaracja z arkusza stylów oznaczona !important pokonuje zwykłą deklarację w atrybucie style. Nie pokonuje deklaracji inline, która sama jest oznaczona !important.

Czy używanie !important to zła praktyka?

Jeśli służy do wygrania walki o specyficzność, tak: kolejne nadpisanie też będzie potrzebować !important, a arkusz stylów staje się trudny do zmiany. Ma sens w klasach narzędziowych, które zawsze muszą działać (jak .hidden), przy nadpisywaniu stylów inline z zewnętrznych bibliotek i w arkuszach stylów użytkownika.

Jak oblicza się specyficzność CSS?

Policz trzy kolumny: selektory ID, potem klasy, atrybuty i pseudoklasy, potem selektory typu i pseudoelementy. Porównuj kolumna po kolumnie od początku, więc #nav a (1,0,1) pokonuje .menu .item a (0,2,1). Selektor uniwersalny * i kombinatory nic nie dodają.

Powiązane zagadnienia